CSS架构 | 锤子前端

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

Sat, 30 May 2026 00:08:24 GMT

《用 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…

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

Sun, 24 May 2026 00:07:06 GMT

《告别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.

#tailwindcss #CSS 《Tailwind 与原生 CSS 结合》Tailwind CSS 4 通过全面转向原生 CSS 变量和改进的配置方式，实现了与传统 CSS 的无缝融合，解决了之前版本的争议性问题

Thu, 07 Aug 2025 11:22:19 GMT

#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.