https://t.co/otZg9dIh7u has fully moved off CSS-in-JS to CSS Modules, resulting in 55% less server-s...

GitHub(@github)

GitHub(@github)2026年10月16日

https://t.co/otZg9dIh7u has fully moved off CSS-in-JS to CSS Modules, resulting in 55% less server-s...

6.9内容质量

TL;DR · AI 摘要

GitHub on X: " has fully moved off CSS-in-JS to CSS Modules, resulting in 55% less server-side render time and 25% faste...

核心要点

主题聚焦：has fully moved off CSS-in-JS to CSS Modules, re
来源：GitHub(@github)，建议结合原文判断细节。
AI 分析暂不可用，本条为保底评分与摘要。

#AI#编程#前端#后端#安全

打开原文

GitHub on X: "https://t.co/otZg9dIh7u 已完全从 CSS-in-JS 迁移到 CSS Modules，使服务器端渲染时间减少 55%，组件初始化速度提升 25%。https://t.co/0AV4Fr3RSo" / X

GitHub

@github

GitHub.com

已完全从 CSS-in-JS 迁移到 CSS Modules，使服务器端渲染时间减少 55%，组件初始化速度提升 25%。

$

通过传输更多 CSS 提升网站性能

7 分钟阅读

由 Josh Black & Marie Lucca Primer 设计系统驱动了 GitHub 上许多您今天看到的体验。从按钮到横幅到面包屑导航，这些基础组件需要在各种场景下都具备可访问性、灵活性和高性能。

2023 年，某些页面上的组件数量开始激增。这导致我们现有的 CSS-in-JS 解决方案出现多个性能相关挑战：

页面首次加载时间变长，因为样式需要在客户端初始化
服务器端渲染性能下降，因为样式收集从客户端转移
随着页面组件数量增加，样式更新变得难以控制

很明显，Primer 团队需要从源头解决问题。我们需要找到一个替代方案，彻底避免当前解决方案带来的客户端和服务器端成本。最重要的是，任何替代方案都必须以一种不会在迁移过程中破坏 GitHub 的方式工作。

引入 CSS（模块）

Primer 团队找到了一个符合所有要求的解决方案：CSS Modules。这种格式让我们可以做最喜欢的事情之一：编写和使用原生 CSS 特性，同时仍然能够实现 CSS-in-JS 所带来的部分共置和封装效果。

通过 CSS Modules，样式将与组件的 JavaScript 源代码一起写在 CSS 文件中。它还可以默认将所有类名视为本地作用域，避免全局选择器可能带来的冲突和挑战。这种格式还消除了对客户端或服务器端运行时行为的需求。相反，样式将被合并到 CSS 样式表中，并作为页面 HTML 的一部分发送。

然而，这个解决方案与我们当时的 CSS-in-JS 方案存在根本性差异。这次变更需要更新每个 Primer 组件，以及 GitHub 上使用该技术编写的每个组件。幸运的是，设计系统是实现这种大规模变更的理想载体。

向 CSS Modules 逐步过渡

转向 CSS Modules 的形势已经很明确。Primer 团队需要为每个组件提供更新，将其从 CSS-in-JS 迁移到 CSS Modules。同时，对这些组件的更新不能破坏 GitHub 中的任何使用场景。最后，我们用于 CSS-in-JS 的底层技术也必须继续为 GitHub 中当前使用它的组件提供支持。

在所有这些约束条件下，我们决定采用渐进式迁移策略，以安全地推送组件更新而不会造成破坏。对于每个组件，我们的计划是：

添加一个新文件，将现有样式转换为 CSS Modules
将组件添加到一个功能标志中，用于在新旧样式之间切换
使用现有的视觉回归测试验证 CSS-in-JS 解决方案与 CSS Modules 之间的快照是否完全一致

逐步将功能标志推广给我们的团队，然后推广给GitHub员工，最后推广给所有GitHub用户，以便在过程中发现任何问题

这一过程创建了一个强大的反馈循环，Primer在持续将这些更改交付给GitHub的过程中，问题在早期就被标记出来。使用功能标志使我们能够安全地进行此迁移，同时让我们清楚地看到CSS Modules带来的性能优势。

到2024年12月，Primer中的所有组件都通过此流程迁移至CSS Modules。我们看到了全面的性能提升，特别是：

页面服务器端渲染时间减少了55%
页面上组件初始化时间减少了25%

在Primer中完成这项工作后，我们看到了明确的性能提升，开始思考是否能在GitHub的其他部分通过类似转换获得相似的性能提升。同样，我们还需要多长时间才能最终在整个公司范围内停止对CSS-in-JS的支持？

GitHub上远离CSS-in-JS的实践

从Primer中移除CSS-in-JS解决方案最具挑战性的部分之一是由于使用了sx属性。这个属性是用于样式化和自定义Primer组件的方式。团队可以通过提供一个内联对象来定制组件的各个方面。它体现了CSS-in-JS的最佳和最差之处：

与我们的设计令牌集成的出色TypeScript支持
与组件共存，使所有内容都在同一位置
由于内联对象的动态特性，运行时成本较高
随着页面上使用sx属性的组件数量增加，扩展难度加大

因此，我们远离CSS-in-JS的第一步是减少GitHub上sx属性的使用。这将使我们能够立即提升性能，类似于迁移Primer组件时看到的成果。同时，这也为我们完全从产品中移除CSS-in-JS做好了准备。

Primer的双重性

需要特别注意的是，虽然设计系统本身已正式脱离styled-components，但GitHub代码库的很大一部分仍然在使用。由于sx属性多年来一直是GitHub的默认样式标准，我们面对着成千上万个需要迁移的sx属性，才能考虑将GitHub迁移到全新的@primer/react版本，该版本不再依赖styled-components。

那么……我们如何在提高信心的同时减少风险地完成如此庞大的工作量？答案是：不能一次性全部完成。

最初的CSS迁移比我们之前描述的要复杂一些：除了将组件迁移到CSS模块外，我们还通过功能标志在生产环境中进行测试并逐步推出，同时在名为@primer/styled-react的过渡库中创建了“包装器”组件。这个包的唯一目的是允许在新迁移的组件中继续使用sx属性。这样，GitHub用户界面代码库中使用该属性的实例可以通过导入@primer/styled-react中的相同组件继续使用，而我们则在不使用该属性的情况下直接从@primer/react导入时实现性能提升。

Styled Box Zero

迁移过程的下一阶段如下：

按包逐一处理：将所有sx属性用法转换为等效的CSS模块文件（包括交叉引用，参见迁移到CSS变量）
将@primer/styled-react导入替换为@primer/react导入
在预生产环境中进行测试
部署

令人惊讶的是，当我们准备开始这项大规模工作时，styled-components进入了维护模式，这进一步确认了我们正在朝着正确的方向前进。

这项工作于2025年4月启动，当时需要迁移约7,760个sxprops，直到2026年5月才完成。最初，我们的一位优秀内部开发者Ian Sanders创建了一个VS Code插件，用于按属性迁移。我们内部也开发了一个类似的codemod工具，用于批量迁移GitHub代码库中的文件。虽然这项工作需要一定的人工监督和仔细验证，但大部分过程是自动化的。8名工程师在6个月内迁移了6,419个属性，观察到服务器端渲染性能在某些页面上提升了1%到22%不等。

在GitHub的另一端，Copilot的能力呈指数级增长。AI变得越来越智能、强大；在进行这项工作的同时，我们发布了Copilot代码代理和Copilot代码审查功能。

当我们于2026年4月重新接手这项工作时，形势已大不相同：仅用两周时间，两名工程师通过不懈努力和大量Copilot代码代理的协助，就将sxprops从895个减少到0个。

主题之战

这是一个重要的日子：我们终于完成了阻碍我们彻底移除styled-components的sx迁移工作，这项持续多年的努力终于完成……我们终于可以清理这些依赖项，转向其他更令人兴奋的工作了？大错特错！

GitHub支持七种不同的主题，所有主题都提供高对比度模式变体。所有这些功能都通过你猜对了，就是styled-components实现的。在考虑移除这些依赖项之前，我们需要先解耦主题系统。

不过，这并没有听起来那么严重。我们的主题变量一直通过@primer/css包在CSS中定义，而且我们在2025年底迁移@primer/react时就已经计划了非styled主题方案。真正需要移除的是由styled-components启用的JavaScript用法和工具。我们再次投入工作。

现在你已经熟悉流程了：执行迁移，逐步推出，为所有功能添加特性标志。经过两个月的推进和一些小插曲后，我们所有系统都准备就绪，可以移除依赖项了；我们甚至为这个操作添加了特性标志。宁可谨慎也不冒险。

结局圆满

截至2026年6月，GitHub已完全使用CSS模块进行运行。我们设置的安全保障措施使我们能够安全地推出重大架构变更，在生产环境中进行压力测试，及时发现错误并高效修复，最终帮助我们实现了目标，并在过程中实现了显著的性能提升。

最初看似普通的CSS迁移，最终演变为GitHub如何在大规模上构建样式、主题和交付UI的渐进式平台重构。最终，我们不仅从dotcom中移除了sx、styled-components和styled-system，而且在整个过程中没有对GitHub造成任何破坏。提升产品性能、用户体验和用户满意度始终是我们GitHub团队的首要任务。

由AI驱动的开发者平台，用于构建、扩展和交付安全的软件。