《用 Web Components 构建框架无关的设计系统（实践指南）》

标签：#前端 #WebComponents #设计系统 #Elena #VitePress #CSS #无障碍

总结：
本文是一份超详细的实战教程，手把手教你用 Web Components（通过 Elena 库）和 VitePress 搭建一个框架无关、可发布的设计系统。核心思路是"最低可行层级"——用 web 标准直接写原子组件，避免框架锁定；组件保持"最笨"状态，把复杂业务逻辑留给应用层。文章涵盖 monorepo 结构搭建、Elena 组件脚手架、条件渲染、@scope 样式隔离、CSS 自定义属性主题化，以及通过 JSDoc + Custom Elements Manifest 自动生成 Props 表格的文档工作流。最终产出的是一个可独立发布的组件包 + 可部署的静态文档站。

文章要点：
1. 设计系统从第一天就绑定特定框架（如 React）是"令人费解的"——web 标准组件才是可移植、可组合、经得起时间考验的选择
2. Elena 是"刚好够用的抽象"：处理跨框架的 prop/attribute 同步、事件委托等脏活，但不掩盖 web 标准本质
3. 组件应保持"最笨"——被告知显式状态和内容的声明式组件，比内置复杂状态管理的"聪明"组件更健康
4. 设计决策应该在代码中而非 Figma 中完成：现代色彩空间、相对单位、对数排版比例等，设计工具只能模拟浏览器的很小一部分能力
5. 用 @scope 实现样式隔离 + 组件级 CSS 自定义属性作为"最终层 token"，既保证封装又有主题化回退
6. JSDoc 注释即文档：Elena 自动生成 custom-elements.json，VitePress 通过 data loader 直接渲染 PropsTable 和 ComponentHeader
7. 文档即测试场：在 VitePress 中实时预览组件，确保跨框架可移植性；开发时 concurrent 运行 watch + docs:dev 实现热更新
8. 条件渲染示例：同一个组件通过 href prop 自动切换 button/a 标签，CTA 链接按钮的常见需求也能语义化实现

URL：https://piccalil.li/blog/framework-agnostic-design-systems-part-1/

Piccalilli

Framework-agnostic design systems: a practical approach to web components

Baking framework lock-in into your design system from day one is a recipe for obsolescence. Component documentation is often tedious and out-of-sync with development. Let’s build a documentation-first, framework-agnostic component library using web standards…

《CSS 与 JavaScript 动画性能之争》

标签：#前端 #CSS动画 #JavaScript动画 #WebAnimationsAPI #性能优化 #GSAP #Motion

总结：
本文通过交互式演示拆解了 CSS 与 JS 动画的性能差异真相：CSS Keyframes 和 Transitions 运行在独立线程，主线程阻塞时依然流畅；而传统 JS 动画（如 requestAnimationFrame 循环）与主线程争抢资源，容易卡顿。但 Motion 库通过底层调用 Web Animations API（WAAPI）绕过了这一限制，实现了与 CSS 同级别的流畅度。作者建议优先使用原生 CSS，遇到 CSS 无法覆盖的场景时选择 Motion 等 WAAPI 方案，而非直接上 GSAP 这类纯主线程库。

文章要点：
1. CSS 动画的核心优势不是"计算快"，而是运行在独立线程，主线程再忙也不影响动画流畅度
2. 传统 JS 动画（requestAnimationFrame）每帧都在主线程计算，React 重渲染或 fetch 解析时容易掉帧
3. Motion 库（原 Framer Motion）底层使用 Web Animations API，能接入与 CSS 相同的底层动画引擎，主线程阻塞时照样丝滑
4. GSAP 功能极其强大，但坚持在主线程运行，是"能力换性能"的取舍，适合复杂序列动画而非简单过渡
5. 现代 CSS 已经很能打，View Transitions、linear()、Animation Timeline 等新 API 大幅减少了必须上 JS 的场景
6. 选型建议：能用 CSS 就不用库 → CSS 搞不定优先选 Motion/WAAPI → 只有复杂时间线控制才考虑 GSAP

URL：https://www.joshwcomeau.com/animation/css-vs-javascript/

Joshwcomeau

CSS vs. JavaScript • Josh W. Comeau

There are a bunch of JavaScript animation libraries out there, and you might have wondered whether there’s a performance cost compared to traditional CSS transitions and keyframe animations. In this blog post, we’ll compare the same animation across several…

《告别Tailwind，重新学习组织CSS》

标签：#前端 #CSS #TailwindCSS #CSS架构 #响应式设计 #语义化HTML

总结：

文章要点：
1. 作者从Tailwind迁移到语义化HTML+原生CSS，发现Tailwind其实教会了她很多系统性思维（如重置样式、配色、字体层级），现在正把这些系统用原生CSS重新实现。
2. 采用"组件化"CSS架构：每个组件有独立类名和文件，CSS互不覆盖，编辑时只需关注100行左右的局部代码，大幅降低心智负担。
3. 保留Tailwind的实用系统：直接复制preflight重置样式，沿用配色变量和字体尺寸变量，让原生CSS也能像Tailwind一样快速决策"要大一点就用xl"。
4. 响应式设计新思路：减少媒体查询，改用CSS Grid的auto-fit和grid-template-areas实现自适应布局，这是Tailwind难以做到的"奇怪玩法"。
5. 迁移原因：新版Tailwind强依赖构建工具；作者CSS能力提升后想突破Tailwind的限制；受《Tailwind与CSS的女性气质》一文影响，决定认真对待CSS这门技术而非逃避它。

URL：https://jvns.ca/blog/2026/05/15/moving-away-from-tailwind--and-learning-to-structure-my-css-/

Julia Evans

Moving away from Tailwind, and learning to structure my CSS

Hello! 8 years ago, I wrote excitedly about discovering Tailwind.

《编写可维护CSS的实践指南》

标签：#前端 #CSS #TailwindCSS #AtomicCSS #StyleX #CSSModules #CSS_Scoping #CSS_Variables #CSS_Layers #Fluid_Typography #StyleLint #Component_Scoped_CSS

总结：
两位前端老兵Wes Bos和Scott Tolinski畅聊如何让CSS不变成"垃圾场"。核心思路是选一个系统坚持到底、用变量代替硬编码、保持组件独立可移植，并善用现代CSS原生能力（如@scope、@layer、clamp流体排版）减少媒体查询的重复劳动。他们还对比了Tailwind、StyleX、CSS Modules等主流方案，强调好CSS要"有弹性"——能自适应容器变化，而不是在每个断点重写一遍样式。

文章要点：
- **样式别"漏"出去**：好CSS要像密封舱，组件拆下来放在白纸上照样好看；如果样式太宽泛、到处泄漏，代码很快就会腐烂发臭
- **变量是救命稻草**：颜色、字体、阴影全进变量里，别写死数值；不然一年后你会在代码里挖出40种不同的灰色，改起来想哭
- **给CSS分层控权**：用`@layer`把重置、主题、组件样式分楼层，告别"加权重、加!important"的 specificity 战争，心里踏实多了
- **原生作用域来了**：`@scope`已经登陆主流浏览器，甚至可以把`<style>`直接丢进组件里自动限定范围，Vue和Svelte用户听了直呼"终于等到你"
- **流体排版超省心**：用`clamp()`做字体大小，让文字在手机和桌面之间丝滑缩放，很多时候连媒体查询都可以省了
- **Tailwind vs CSS Modules vs StyleX**：Tailwind像速记本，上手快但类名堆成山；CSS Modules稳扎稳打；StyleX走构建时优化路线，但媒体查询语法劝退不少人——选哪个不重要，关键是别混着用
- **上StyleLint当"坏人"**：让工具自动拦住"用硬编码颜色"这类操作，比你在PR里当挑刺老哥体面多了，团队协作必备

文章URL：https://syntax.fm/show/999/writing-maintainable-css/transcript

syntax.fm

Transcript: Writing Maintainable CSS - Syntax #999

#CSS

https://www.stefanjudis.com/today-i-learned/pathlength-makes-makes-svg-path-animations-easier-to-manage/

Stefanjudis

pathLength makes makes SVG path animations easier to manage

Use the "pathLength` attribute to make animating "stroke-dasharray" and "stroke-dashoffset" easier.

#CSS 本文深入解析了 CSS position: sticky 的常见“坑”：粘性元素不能大于滚动容器，也不能被尺寸过小的祖先块限制，尤其在 Flex/Grid 布局中默认的 stretch 对齐会让粘性失效；解决办法是给相关元素设置 align-self: flex-start 或限制高度并内部滚动，确保粘性元素在规范允许的包含块内自由“粘贴”。 https://frontendmasters.com/blog/the-weird-parts-of-position-sticky/

Frontend Masters

The Weird Parts of position: sticky;

Using position: sticky; is one of those CSS features that’s incredibly useful, seemingly simple, and also, frequently frustrating.

#CSS CSS 性能榜：只动 transform/opacity+transition/animation 或 WAAPI 最丝滑，别碰会触发 Layout 的几何属性与 setInterval 改样式。

https://motion.dev/blog/web-animation-performance-tier-list

motion.dev

The Web Animation Performance Tier List, Motion Magazine

Learn what makes web animations fast, slow, and everything in between with our 2025 web animation performance tier list.

#CSS 后兼容时代：2025 年起 Grid3、Subgrid、Container Queries、@layer 已成新 baseline，可直接用。
- 五大布局模型：Flow、Flexbox、Grid、Container Query、Intrinsic，各司其职。
- Subgrid 正式可用：子网格继承父网格轨道，一次性解决卡片对齐地狱。
- Container Queries 全面落地：组件按自身宽度响应，无需再绑死视口。
- @layer 正式版：显式层叠顺序，告别选择器权重内卷。
- Flexbox 默认支持 gap：row-gap / column-gap 无需 display:grid 也能优雅间距。
- 新关键字 safe/unsafe：align/justify-content 增加溢出保护。
- 四套现成无媒体查询模板：Holy Grail、自适应仪表板、多列文章、一行居中。
- DevTools 升级：Chrome 可视化 Subgrid，Firefox 仿真容器查询。
- 2026+ 在途功能：masonry、@when 条件规则、相对颜色语法。

https://2ality.com/2025/10/css-layout.html

2Ality

[Web dev for beginners] CSS layout: flexbox, grid, media queries and container queries

CSS provides a variety of services for web content: In the previous chapter, we used it to format content: to change colors, typefaces, etc. In this chapter, we will use it to lay out content: to place HTML elements on a page.

#文章 #CSS 文章示范了用容器查询、:has()、clamp()等现代 CSS，让“头部+卡片网格”这一简单布局随卡片数量与宽度自动切换形态。

https://ishadeed.com/article/modern-css-section-layout/

Ishadeed

Solved By Modern CSS: Section Layout

Building a typical section design with modern CSS.

#CSS CSS 新增 linear() 时间函数，用“连点成线”方式原生实现弹簧、弹跳动画，免 JS，但需工具生成数据且要注意中断与回退。

https://www.joshwcomeau.com/animation/linear-timing-function/

Joshwcomeau

Springs and Bounces in Native CSS • Josh W. Comeau

The “linear()” timing function is a game-changer; it allows us to model physics-based motion right in vanilla CSS! That said, there are some limitations and quirks to be aware of. I’ve been experimenting with this API for a while now, and in this post, I’ll…

#CSS Styled-Components 维护模式：一个 40%更快的分支：Styled-Components 目前处于维护模式，Sanity 团队分支了它，并利用 React 18 的 useInsertionEffect 钩子（以及其他因素）使其速度大幅提升。Sanity 和 Linear 都在使用这个分支作为临时解决方案，直到他们完全迁移到更好的方案。

https://www.sanity.io/blog/cut-styled-components-into-pieces-this-is-our-last-resort

Sanity.io

styled-components maintenance mode: A 40% faster fork | Sanity

After styled-components entered maintenance mode, we forked it with React 18's useInsertionEffect. Result: 40% faster renders for Linear. Open source solution.

#CSS #文章 Josh W. Comeau 在《Color Shifting in CSS》中揭示了 CSS 颜色过渡变灰的本质：浏览器用 RGB 插值，即使写的是 HSL；他用 filter: hue-rotate() 绕过限制，实现鲜艳无缝的色调旋转，并叠加闪烁动画，让粒子效果生动又轻盈。

https://www.joshwcomeau.com/animation/color-shifting/

Joshwcomeau

Color Shifting in CSS • Josh W. Comeau

A little while ago, I was trying to animate an element’s background color, so that it cycled through the rainbow. Seems easy, but it turns out, browsers have a surprisingly big limitation when it comes to color processing! In this tutorial, we’ll dig into…

#CSS 文章介绍了CSS新特性`scroll-target-group`及其与`:target-current`伪类的结合使用，能够轻松实现滚动侦测效果（如目录高亮）。该特性目前仅在Chrome 140中支持，可通过`@supports`检测实现渐进式增强，同时在无障碍性方面符合常规要求。

https://una.im/scroll-target-group/

Una.im

Creating a scroll-spy with 2 lines of CSS

scroll-target-group is a new CSS feature that lets you create scroll-spy table of contents with basically 2 lines of CSS.

#tailwindcss #CSS 《Tailwind 与原生 CSS 结合》Tailwind CSS 4 通过全面转向原生 CSS 变量和改进的配置方式，实现了与传统 CSS 的无缝融合，解决了之前版本的争议性问题。它引入了“非病毒”模式(“Non-Viral”)，允许开发者在不影响现有 CSS 架构或设计系统的情况下灵活使用 Tailwind 的工具类或纯 CSS，极大地提升了开发体验，让作者从批评者转变为支持者，标志着 Tailwind 与原生 CSS 的完美结合。

https://thathtml.blog/2025/08/tailwind-and-css-friends-at-last/

That HTML Blog

Friends at Last: Tailwind & CSS…whodathunkit?!

Freely compose UI using native CSS variables & syntax, Tailwind design tokens in CSS, and Tailwind utility classes.

#React #CSS #文章 《如何为 React 应用程序添加样式》文章提到了语义化CSS、设计令牌（Design Tokens）、CSS-in-JS（如styled-components）和Utility-First框架（如Tailwind）四种CSS方案，作者最终推荐Utility-First（如Tailwind），因其通过原子类组合实现高效、低复杂度的组件级样式管理，并强调“复用组件而非样式”的核心原则。

https://alexkondov.com/full-stack-tao-styling/

Alexkondov

How to Style a React Application

We don’t build web applications the same way we did a decade ago. We don’t think of pages, we think of components. We don’t pass data to the template to render…

#CSS margin手动调间距？CSS的gap属性才是现代布局的终极解法！

https://kyleshevlin.com/prefer-gaps-to-margins/

Kyle Shevlin's Blog

Prefer Gaps To Margins | Kyle Shevlin

Prefer using gaps to margins when it comes to your component layouts.

#CSS 文章通过简单示例和可视化，详细介绍了SVG <path> 元素的直线命令（如M、L、H、V和Z），帮助读者理解其语法和用法，从而实现技术绘图和数据可视化的功能。

https://www.smashingmagazine.com/2025/06/decoding-svg-path-element-line-commands/

Smashing Magazine

Decoding The SVG path Element: Line Commands — Smashing Magazine

SVG is easy — until you meet `path`. However, it’s not as confusing as it initially looks. In this first installment of a pair of articles, Myriam Frisano aims to teach you the basics of `` and its sometimes mystifying commands. With simple examples and visualizations…

#CSS 动画切换导航菜单的js和css实现

https://www.smashingmagazine.com/2025/06/creating-moving-highlight-navigation-bar-javascript-css/

Smashing Magazine

Creating The “Moving Highlight” Navigation Bar With JavaScript And CSS — Smashing Magazine

In this tutorial, Blake Lundquist walks us through two methods of creating the “moving-highlight” navigation pattern using only plain JavaScript and CSS. The first technique uses the `getBoundingClientRect` method to explicitly animate the border between…

#CSS CSS 动画中部分关键帧（Partial Keyframes）的使用技巧和优势。

https://www.joshwcomeau.com/animation/partial-keyframes/

Joshwcomeau

Partial Keyframes • Josh W. Comeau

CSS Keyframe animations are so much more powerful than most developers realize. In this tutorial, I’ll show you something that completely blew my mind, a technique that makes our keyframe animations so much more reusable and dynamic! 🤯

#文章 #CSS 通过使用OKLCH颜色空间来改善颜色管理。文章首先介绍了Tailwind的优势，包括小体积、高性能和内置代码分割等。接着，文章解释了动态主题的概念及其重要性，强调了个性化对用户参与度和满意度的积极影响。

https://evilmartians.com/chronicles/better-dynamic-themes-in-tailwind-with-oklch-color-magic

evilmartians.com

Better dynamic themes in Tailwind with OKLCH color magic—Martian Chronicles, Evil Martians’ team blog

We make Tailwind CSS play nice with CSS variables, OKLCH colors, and dynamic themes. Get reliable, predictable theming.