CSS禅宗花园梦想，终于发货了

在没有预处理器的情况下，使用 Mozilla 和 Lincoln Loop 在现代的原生 CSS 上重建 Firefox.com，以及这对当今的设计系统意味着什么。早在 2008 年，刚从大学毕业的时候，我就发现了 CSS Zen Garden，这是 Dave Shea 的项目，在该项目中，只使用 CSS 就可以将一个 HTML 文件重新设计为完全不同的样式。这是梦想的一瞥：干净、可重复使用的设计，与内容完全分离。然后你尝试交付真正的客户作品，但梦想破灭了。没有 CSS 变量。可用的属性无法表达完全保真度的设计，因此我们依靠服务器端处理、图像、基于表格的布局和无尽的技巧。每个浏览器呈现的内容都不同，所以大部分工作只是让一种设计在所有浏览器上表现良好。禅园展示了理论上的可能性。生产则是另一回事。这一差距花了二十年的大部分时间才缩小，而且大部分缩小是在过去几年里发生的。自定义属性为我们提供了浏览器可以理解的变量。 Grid 和 Flexbox 为我们提供了不与媒介冲突的布局。我们在 2008 年缺少的属性现在已经存在，并且它们的实现足够一致，您可以针对它们而不是围绕它们进行设计。 Firefox.com 这一差距终于弥合了。现代 CSS 现在原生地完成了我们过去需要预处理器和 hack 才能完成的事情。在重建 Firefox.com 时，我与 Mozilla 和 Lincoln Loop 的团队合作，用现代的原生 CSS 构建了整个系统，没有任何预处理器。自定义属性直接从设计文件中导出，原生 CSS 无需任何修改即可编写一次，并且可以在每个现代浏览器中使用，并使用最小的品牌样式表为传统浏览器提供基本的、可访问的品牌。我们共同构建了一个由 70 多个组件和 25 个页面模板组成的设计系统，以 Wagtail 组件的形式实现，以便网站的内容团队无需工程帮助即可组装页面。该站点当前支持 19 个区域设置。有一个诚实的脚注。我们最终在生产中使用了 PostCSS，用于一项工作：内联 @import 语句。原生 @import 在某些浏览器中仍然具有糟糕的性能特征，在像这样的网站上，它比架构纯度更重要。编写的 CSS 仍然是普通的原生 CSS。其中没有任何内容取决于构建步骤是否有效或有意义。该构建只会展平浏览器本来会串行获取的内容。当有人告诉您一个项目“没有构建步骤”时，这种区别值得牢记。重要的是您编写的源代码是浏览器使用的语言，还是仅在编译之前存在的方言。为什么这对我很重要禅宗花园的梦想终于在生产中实现了。与 Web 标准的领导者之一 Mozilla 合作意义重大。 Firefox.com 是一个关于浏览器的网站，由一个花了 20 年时间争论构建浏览器的平台的组织创建。很难想出比这更好的地方来了解该平台是否真的准备好了。这是。我要感谢那些塑造了我对这项技术的看法的人：Nicole Sullivan、Rachel Andrew、Jen Simmons、Chris Coyier、Kasey Kelly，他们将我与 Mozilla 项目联系起来，还有 Eric Meyer，我家乡的英雄。他们的工作教会了我们整整一代人将 CSS 视为一个系统。主题 这是贯穿我所有工作的主题：设计系统，让团队快速行动并保持一致，无论构建块是纯 CSS、Tailwind 还是 shadcn/ui。这些工具每隔几年就会改变一次。不变的是系统的价值，在该系统中，做正确的事情也是容易做的事情，并且设计师的决策在进入生产过程中不会被翻译三遍。如果您的团队正在重新考虑其前端基础，请联系 。