配了八年 CSS，最初那个「用一套 HTML 套出上百种设计」的梦，今天浏览器终于帮你实现了

2003 年 Dave Shea 做了个实验：同一份 HTML，不动一行标签，只换 CSS 样式表，页面就能变成完全不同的设计。几百个设计师提交了几百种风格，这个项目叫 CSS Zen Garden，它告诉所有人：CSS 的潜力远不止「给文字换个颜色」。

但现实很骨感。你做真实项目就会发现，CSS Zen Garden 只存在于理论里。

那时候没有 CSS 变量，属性表达不了复杂设计，大家靠服务器端处理、图片、table 布局和无穷无尽的 hack。浏览器之间渲染不一致，大把时间花在让同一个设计在各个浏览器里表现一致。Zen Garden 展示了可能性，但生产环境是另一回事。

这个差距，用了将近二十年才弥合，而且大部分弥合发生在最近几年。

Custom Properties 给浏览器带来了变量。Grid 和 Flexbox 带来了真正不跟介质对抗的布局。那些 2008 年我们缺少的属性，现在都有了，而且实现得足够稳定，你可以「对着属性设计」而不是「绕过属性设计」。

这个差距终于被填上了。

Firefox.com 重建项目就是证明。与 Mozilla 和 Lincoln Loop 团队合作，用纯原生现代 CSS 从零构建了整个设计系统，没有预处理器。

Custom Properties 直接从设计文件导出，原生 CSS 写一次没有 hack，兼容所有现代浏览器，只有给旧浏览器的最小化品牌样式表。整个系统包含 70 多个组件和 25 个页面模板，以 Wagtail 组件形式实现，站点内容团队可以自行组装页面，不需要工程师介入。目前支持 19 个语言地区。

有一个诚实的脚注：项目最终还是用了 PostCSS，但用途只有一个——内联 @import 语句。因为在某些浏览器里，原生 @import 的性能表现依然很糟糕，在这个规模的站点上，这个区别比架构洁癖更重要。

关键在于：你写的源代码是浏览器能理解的语言，还是只在编译前存在的方言？

CSS Zen Garden 当年展示的是「理论上可以」。现在它变成了「生产环境真的在做」。70+ 组件、25 个模板、19 个地区、一个内容团队能自行运营的站点——这些全部用原生 CSS 构建，没有预处理器依赖，没有 hack。

如果你现在还在用 Sass/Less 写变量，写 mixin，写函数，先问自己一个问题：这件事原生 CSS 现在能做了吗？大多数情况下，答案已经是「能」。