截至 2026 年 6 月，GitHub 已完成网站全面使用 CSS Modules，结束了对 CSS-in-JS 的依赖，包括 styled-components、styled-system 和 sx 属性。该公司表示，这一转变使服务器端渲染时间降低了 55%，并使页面中组件初始化所需的时间减少了 25%。
这一举措是为了应对自 2023 年以来 GitHub 某些页面中组件数量不断膨胀的问题。此前的方案要求在客户端初始化样式，增加服务器端渲染期间收集样式的成本；随着页面中组件数量增加，样式更新也变得更加困难。
GitHub 为什么选择 CSS Modules？
CSS Modules 允许开发者在组件源代码旁的 CSS 文件中编写样式，并默认将类名设为局部作用域，从而减少冲突。对本次迁移而言，更重要的是，它消除了客户端或服务器端运行时行为的需求；样式会被打包到随页面 HTML 一起发送的 CSS 文件中。
迁移工作从 Primer 设计系统开始。团队为每个组件添加 CSS Modules 文件，通过功能标志将组件连接起来，以便在旧方案与新方案之间切换，然后使用视觉回归测试来验证结果是否一致。之后，迁移范围逐步从 Primer 团队扩大到 GitHub 员工，最终覆盖所有用户。
截至 2024 年 12 月，所有 Primer 组件都已迁移至 CSS Modules。但这还不够，因为 GitHub 代码库的大部分仍在使用 sx 属性，通过内嵌对象定制组件。尽管这种方式与 TypeScript 及设计令牌实现了良好集成，但其动态特性提高了运行时成本，并随着组件数量增加而使扩展更加困难。
大规模管理迁移
为避免破坏现有用法，GitHub 创建了一个名为 @primer/styled-react 的中间库。该库允许继续在已迁移至 CSS Modules 的组件中使用 sx，而不需要 sx 的路径则可以直接从 @primer/react 导入。
移除 sx 的工作始于 2025 年 4 月，当时这一属性约有 7,760 处使用。在内部 VS Code 插件和 codemod 工具的帮助下，一个由 8 名工程师组成的小组在 6 个月内迁移了 6,419 处使用，部分页面的服务器端渲染时间因此提升了 1% 至 22%。到 2026 年 4 月，在 2 名工程师参与并使用 GitHub Copilot 编程代理的情况下，使用数量在 3 周内从 895 降至零。
视觉主题仍然是另一项挑战。GitHub 支持 7 种主题，每种主题都有高对比度模式，而该系统的部分内容与 styled-components 相关。因此，团队还迁移了 JavaScript 用法和主题工具，同时继续在 CSS 中定义颜色变量。
这次实践对开发者意味着什么？
GitHub 的数据表明，当用户界面不断膨胀时，消除运行时样式逻辑可以带来切实的性能提升。不过，这次实践最重要的价值并不在于 CSS Modules 本身，而在于实施方式：分阶段兼容、功能标志、视觉测试、渐进式发布，以及可审查的自动化。
另一方面，这一过程也表明，从 CSS-in-JS 迁移并不只是更换样式编写方式。它还要求移除 sx 属性、解除主题与 styled-components 之间的关联，并在较长时期内保持组件兼容。因此，相关结果并不能证明每个项目都会获得相同的收益；这些收益与 GitHub 的规模、组件架构以及其使用动态样式的方式有关。