配了八年 CSS，以为那个「一套 HTML 套出百种设计」的梦永远只是演示——今天 Firefox.com 用 70 个组件把它彻底量产了

2003 年，Dave Shea 做了 CSS Zen Garden：一个 HTML 文件，套上不同的 CSS，就能变成完全不同的设计。设计师们沸腾了——这才是 CSS 该有的样子：HTML 只负责结构，CSS 全权负责视觉。

然后你去接真实项目，梦就碎了。

当时没有 CSS 变量，属性表达不了高保真设计，大家靠服务端处理、图片、表格布局和一堆 hack 撑着。每个浏览器渲染还不一样，大部分工作时间都花在让同一个设计在各个浏览器里看起来一致。Zen Garden 证明了理论上可以，生产环境是另一回事。

这个差距花了近二十年才补上，而这二十年里大部分的缩小差距工作，都发生在最近几年。

2026 年 8 月，Jo Sprague 在 Mozilla 官方博客发了篇文章，标题就叫《The CSS Zen Garden dream, finally shipped》。他和 Lincoln Loop 团队一起，用纯原生 CSS（没有任何预处理器）重写了 Firefox.com。整个设计系统包含 70 多个组件和 25 个页面模板，由 Wagtail 组件实现，内容团队不需要工程师帮忙就能组装页面，支持 19 种语言。

他说：”Native @import 在某些浏览器里还有严重的性能问题，我们最终还是用了 PostCSS 来内联 @import——但写出来的 CSS 始终是纯原生 CSS。没有任何东西依赖构建步骤才能生效。”

这不是在说”不用工具”，而是在说：你写的源码，就是浏览器能读懂的语言。

靠什么做到的？Custom Properties 把设计变量直接导出成浏览器认识的格式；Grid 和 Flexbox 让布局不再跟介质对抗；那些 2008 年 CSS 缺失的能力，现在跨浏览器实现得足够一致，你终于可以”顺着平台设计”而不是”绕过平台 hack”。

举几个具体例子。颜色主题切换，以往要靠 JS 读写 class 或 CSS 变量再加一堆覆盖规则，现在一个 light-dark() 函数搞定。响应式布局，以前要靠媒体查询写多套规则，现在容器查询让组件能感知自己容器的大小而不是 viewport 的大小，做真正的可复用组件。动画交互，@starting-style 让元素首次出现时也有入场动画，scroll-driven animations 让滚动进度直接驱动动画不需要 JS 监听，anchor positioning 让浮层相对于触发元素定位不需要 Popper.js。

整个 Firefox.com 重写，唯一用到构建步骤的地方就是 PostCSS 内联 @import——而这纯粹是因为 native @import 在某些浏览器里还有性能问题，和 CSS 语言本身的能力无关。

CSS 从来没有这么接近 Zen Garden 当年的那个梦。不同设计同一份结构这件事，在 2003 年是演示，在 2026 年的 Firefox.com 上是生产现实。

下一个问题是：你现在的项目里，还有多少”必须靠预处理器才能做到”的设计，其实已经可以换成原生 CSS 了？