Primer Design System 为 GitHub 提供按钮、banner 和 breadcrumb 等体验的基础组件。这些组件需要在不同场景下具备可访问性、灵活性和高性能。
2023年，某些页面上的组件数量迅速增加，现有的 CSS-in-JS 解决方案出现了以下问题：
- 由于样式在客户端初始化，首次页面加载时间变长。
- 将样式收集从客户端移开后，服务器端渲染性能下降。
- 随着页面上的组件数量增加，样式更新逐渐失去控制。
Primer 团队希望找到一种能够消除客户端和服务器成本，并且不会在迁移过程中导致 GitHub 出现故障的解决方案。CSS Modules 既支持使用本地 CSS 特性，也能保留 CSS-in-JS 所要求的特定封装程度。样式将写入与 JavaScript 源文件放在一起的 CSS 文件中；类名默认采用本地作用域，并且不需要客户端或服务器运行时。相反，样式会合并到随 HTML 一起发送的 CSS 文件中。
迁移过程中，每个组件都遵循以下步骤：
- 添加新文件，将现有样式转换为 CSS Modules。
- 使用特性标志在旧样式和新样式之间进行选择。
- 通过视觉回归测试确认屏幕截图保持一致。
- 先逐步向团队、GitHub 员工，随后向所有用户开放该标志。
这一过程提供了早期反馈。2024年12月，Primer 中的所有组件都已迁移到 CSS Modules。
为什么重要
这一变化表明，在组件数量不断增加的界面中，样式管理影响的不仅是开发者体验，还会影响页面加载和服务器端的处理成本。将样式合并到随 HTML 一起发送的文件中，而不是放在运行时处理，旨在减少客户端和服务器端产生额外负载的操作。通过特性标志和视觉回归测试将迁移过程分阶段进行，对于确保广泛使用的设计系统能够在不造成面向用户的界面故障的情况下测试技术变更，具有重要意义。获取早期反馈也使团队能够通过团队和用户所接触的界面来跟踪问题，而不只是从代码层面进行观察。不过，报道并未评估这种方法在 Primer 之外的设计系统中将产生怎样的结果。