2008年，刚毕业时发现了戴夫·谢伊（Dave Shea）的CSS禅意花园（CSS Zen Garden）：一个HTML文件仅靠CSS就能彻底改头换面，设计干净可复用。可交付客户项目时，梦想碎了：没有CSS变量，属性无法表达完整设计，只能靠服务端处理、图片和表格布局。浏览器渲染各异，大量工作只是让设计表现一致。这个差距花了近二十年才弥合，最近几年现代CSS终于能原生做到。

用 Mozilla 和 Lincoln Loop 重建 Firefox.com，全部采用现代原生 CSS、不使用预处理器，以及这对今天的设计系统意味着什么。

2008 年，我刚从大学毕业，发现了 Dave Shea 的 CSS Zen Garden 项目——同一个 HTML 文件，仅靠 CSS 就能彻底改造成完全不同的样子。那是梦想的一瞥：干净、可复用的设计，与内容彻底分离。

可一旦要交付真实的客户项目，梦想就碎了。那时没有 CSS 变量，可用的属性也表达不出完整保真度的设计，只能依靠服务端处理、图片、表格布局和无穷无尽的 hack。每个浏览器渲染都不一样，大量工作只是在让同一个设计在各浏览器上表现一致。Zen Garden 展示了理论上的可能性，生产环境则是另一回事。

这道鸿沟花了将近二十年才弥合，而且大部分发生在最近几年。自定义属性给了我们浏览器能理解的变量，Grid 和 Flexbox 给了我们不必与媒介对抗的布局。2008 年缺失的那些属性如今都已存在，而且实现得足够一致，你可以针对它们去设计，而不是绕着它们走。

Firefox.com

这道鸿沟终于闭合了。现代 CSS 已经原生做到我们过去需要预处理器和 hack 才能做到的事。在 Firefox.com 的重建中，我与 Mozilla 和 Lincoln Loop 团队合作，用现代原生 CSS 构建了整个系统，没有预处理器。自定义属性直接从设计文件导出，原生 CSS 一次写成、没有 hack，在所有现代浏览器中都能工作，同时用一份极简的品牌样式表为旧浏览器提供基本、可访问的品牌呈现。

我们共同构建了一个包含 70 多个组件、25 个页面模板的设计系统，以 Wagtail 组件的形式实现，让网站的内容团队无需工程师协助就能组装页面。网站目前支持 19 种语言。

还有一个诚实的脚注。生产环境中我们确实用到了 PostCSS，但只做一件事：内联 @import 语句。原生 @import 在某些浏览器中的性能仍然很差，而对这样一个网站来说，这比架构上的纯粹更重要。编写出来的 CSS 仍然是普通、原生的 CSS，其中没有任何东西依赖构建步骤才能成立或才能被理解。构建只是把浏览器本来要串行请求的内容压平。

当有人告诉你某个项目「没有构建步骤」时，这个区别值得留意。真正重要的是：你写的源码是浏览器所说的语言，还是一种只存在于编译之前的方言。

为什么这对我很重要

Zen Garden 的梦想，终于在真实项目中实现了。而且是和 Mozilla 一起做的——网络标准的领导者之一——这对我意义重大。Firefox.com 是一个关于浏览器的网站，由那个花了二十年为这个平台发声的组织，用这个平台本身来构建。很难找到更好的地方去验证这个平台是否真的准备好了。

它准备好了。

我要感谢那些塑造了我对这门手艺的理解的人：Nicole Sullivan、Rachel Andrew、Jen Simmons、Chris Coyier、把我引荐给 Mozilla 项目的 Kasey Kelly，以及我家乡的英雄 Eric Meyer。他们的工作教会了我们整整一代人把 CSS 当作一个系统来思考。

那条线索

这条线索贯穿我的所有工作：让团队既能快速行动又能保持一致的设计系统，无论构建块是纯 CSS、Tailwind 还是 shadcn/ui。工具每隔几年就会变。不变的是系统的价值——做正确的事同时也是做容易的事，设计师的决定无需被翻译三次就能抵达生产环境。

如果你的团队正在重新思考前端基础，欢迎联系我。

不少人质疑 CSS Zen Garden 所代表的标记与样式彻底分离理念，认为其导致隐式结构债务与早期布局技巧引发的可用性退化；少数人仍肯定其教育意义并看好现代原生 CSS 设计系统的复兴。

认为 CSS Zen Garden 所代表的标记样式分离在真实项目中弊大于利

• 单一标记文件在现实中不存在，纯 CSS 映射 DOM 会产生未明示的隐式结构，增加理解成本与后续技术债；相较之下 utility-first 显式类更易发现和维护（较多人）
• > 隐藏结构让代码看起来整洁，但理解代码的隐式结构转瞬即逝，固有技术债终需偿还（@vehemenz）

批评 CSS Zen Garden 开启了硬编码布局导致可用性退化

• 早期 CSS 能力不足，设计师用重叠 DIV 加 padding 等技巧实现列布局，很快退化为固定像素宽度，造成按钮文字截断与无用留白（少数人）
• > 它开启了导致现代网页可用性彻底退化的趋势（@cyberax）

肯定 CSS Zen Garden 的教育意义与样式分离理念

• 作者称其通过同一文件换样式学会将 CSS 视为系统；有人回忆入选情怀；有观点认为分离关注点本身正确，Tailwind 是权宜之计，现代原生 CSS 已能支持设计系统组件（较多人）
• > 分离关注点是好的，Tailwind 是权宜之计，现代原生平台已能支持一流的设计系统组件（@TimTheTinker）

指出本文主题与 Zen Garden 同标记多风格之梦无关

• 文章实际是关于用自定义属性、Flex、Grid 等新特性维护单个典型网站的单一样式表，而非同一标记套用迥异风格（少数人）
• > 本文与 Zen Garden 之梦毫无关联，它讲的是用新 CSS 特性维护单站单样式表（@chrismorgan）

反馈新 Firefox.com 设计系统的实现与体验瑕疵

• 作者称新站近乎纯 CSS 构建仅因性能少量用预处理器；有用户指出现版界面过于简单且桌面端元素过大偏移动；有人遇 Android Chrome 菜单项截断；有人问开源与 @import 字体闪烁（较多人）
• > 当前 firefox.com 极其简单，桌面端元素大得像是平板或手机导向（@deburo）

预测未来 UI 将由系统自适应生成而淘汰人工设计

• 智能体开发时代实现技术无关紧要，未来系统按用户所见所为实时生成界面，UI/UX 角色将消失（少数人）
• > 我们很快迎来系统在使用时按情境自动生成界面的时刻，不再需要 UI/UX（@throwitaway222）

有价值的补充

• CSS Zen Garden 网站至今仍在线，可查看历史设计选集（@kreetx）
• 新 Firefox.com 设计系统由合同团队用现代纯 CSS 编写，仅少数内容因性能过预处理器，源码全为纯语法（@yosito）
• 早期 Zen Garden 两列布局靠两个重叠 DIV 且左列加 padding 实现，想做四列就得重构标记或硬编码尺寸（@cyberax）
• HTML 与 CSS 最初是文档展示语言，应用交互后来才加，CSS 花很长时间才追上组件化需求（@TimTheTinker）