使用原生 CSS 重建 Firefox.com

Mozilla 与 Lincoln Loop 合作，使用现代原生 CSS 重建 Firefox.com，无需任何预处理器，实现了 2008 年 CSS Zen Garden 的梦想。当时，受限的 CSS 属性迫使开发者依赖 hack、服务器端处理和基于表格的布局，原因在于浏览器渲染不一致。如今，自定义属性、Grid 和 Flexbox 已弥合这一差距，使干净、可复用的设计系统成为可能。

Firefox.com 重建项目包含超过 70 个组件和 25 个页面模板，作为 Wagtail 组件构建，支持 19 种语言，内容团队可在无工程协助的情况下自行组装页面。PostCSS 仅在生产环境中用于内联 @import 语句以提升性能，而编写的 CSS 保持为纯原生 CSS，无需构建步骤即可直接生效。

该项目证明：浏览器现已能直接理解设计师所写的语言，实现了长达二十年的愿景。关键影响者包括 Nicole Sullivan、Rachel Andrew、Jen Simmons、Chris Coyier、Kasey Kelly 和 Eric Meyer，他们的工作塑造了现代 CSS 思维。核心价值始终是：设计系统中，正确的选择应是最容易的选择，设计师意图可直接流向生产环境。

关键实体：

公司：Mozilla、Lincoln Loop

人物：Dave Shea、Nicole Sullivan、Rachel Andrew、Jen Simmons、Chris Coyier、Kasey Kelly、Eric Meyer、Jo Sprague

常见问题：

问：在 Firefox.com 重建项目中，“无预处理器”是什么意思？

答：编写的 CSS 是纯原生 CSS，浏览器可直接理解；PostCSS 仅在生产环境中用于内联 @import 语句以提升性能，并不用于转换核心样式语言。