CSS Zen Garden梦想，终于发布

# CSS禅意花园的梦想终于落地 | 乔·普拉格 来源：https://josprague.com/blog/the-css-zen-garden-dream-finally-shipped/ 与Mozilla和Lincoln Loop团队合作，使用现代原生CSS（不依赖预处理器）重构Firefox.com网站的过程，以及这对当今设计系统的启示。 2008年刚毕业时，我发现了CSS禅意花园（https://csszengarden.com/）——戴夫·谢亚的项目展示了如何仅用CSS将同一个HTML文件改造为截然不同的设计。这让我窥见了那个梦想：干净、可复用的设计，与内容完全分离。 但当你尝试交付真实项目时，梦想就破碎了。当时没有CSS变量，可用属性无法表达高保真设计，我们只能依赖服务器端处理、图片、表格布局和无数Hack。不同浏览器的渲染差异巨大，大量工作仅仅是为了让同一设计在不同浏览器上表现一致。禅意花园展示了理论上的可能性，生产环境却是另一回事。 这个差距花了近二十年才逐渐弥合，而大部分突破都发生在最近几年。自定义属性让我们拥有了浏览器能理解的变量；Grid和Flexbox提供了不与媒介对抗的布局方案。2008年缺失的属性现在都已存在，且实现一致性足够高，让设计师可以直接基于它们创作而非绕道而行。 ## Firefox.com 这个差距终于消失了。现代CSS现在能原生实现过去需要预处理器和Hack才能完成的功能。在与Mozilla和Lincoln Loop团队合作重构Firefox.com（https://firefox.com/）时，我完全使用现代原生CSS构建了整套系统，未采用任何预处理器。自定义属性直接从设计文件导出，原生CSS一次编写无需Hack，且在所有现代浏览器中运行良好，同时通过最小化品牌样式表为旧版浏览器提供基础的无障碍品牌支持。 我们共同构建了包含70多个组件和25个页面模板的设计系统，将其封装为Wagtail组件，使网站内容团队无需工程协助即可组装页面。该网站目前支持19种语言版本。 这里有个诚实的注释：我们最终在生产环境中使用了PostCSS，仅用于一项任务：内联`@import`语句。原生的`@import`在某些浏览器中性能表现仍然糟糕，而在这类网站中，性能比架构纯粹性更重要。编写的CSS仍然是纯正的原生CSS，其中任何内容都不依赖构建步骤才能生效或理解。构建过程只是将浏览器原本需要串行获取的资源整合到了一处。 当有人说某个项目"无需构建步骤"时，请记住这个区别：关键在于你编写的源代码是否就是浏览器能直接理解的语言，还是仅在编译前存在的方言。 ## 这对我意味着什么 禅意花园的梦想终于在生产环境中实现。能与网络标准领导者Mozilla合作完成这件事意义非凡。Firefox.com是关于浏览器的网站，由花费二十年时间为构建平台奔走呼吁的组织打造。很难想象还有比这里更适合检验平台是否真正准备就绪的地方了。 答案是肯定的。 我欠那些塑造了我对这门技艺思考方式的人们一份人情：Nicole Sullivan（https://www.linkedin.com/in/nicolesullivan/）、Rachel Andrew（https://www.linkedin.com/in/rachelandrew/）、Jen Simmons（https://www.linkedin.com/in/jensimmons/）、Chris Coyier（https://www.linkedin.com/in/chris-coyier-1aa843100/）、Kasey Kelly（https://www.linkedin.com/in/kkellydesign/）——是他将我引入Mozilla项目，以及Eric Meyer（https://www.linkedin.com/in/meyerweb/）——我家乡的英雄。他们的工作教会了我们整整一代人将CSS视为系统来思考。 ## 一脉相承 贯穿我所有工作的主线正是：让团队能够快速且保持一致性地工作的设计系统，无论构建模块是纯CSS、Tailwind还是shadcn/ui。工具每几年就会更迭，但一个系统的核心价值始终不变——让正确的事成为简单的事，让设计师的决策无需经过三次转译就能直达生产环境。 如果您的团队正在重新思考前端基础架构，欢迎联系（https://josprague.com/contact/?topic=contract）交流。