支撑GitHub用户体验的核心设计系统Primer，近期完成了一次底层架构的重大重构：彻底弃用CSS-in-JS方案，全面转向CSS Modules。这一变革旨在解决随着组件数量激增带来的性能瓶颈，最终实现了服务端渲染时间大幅缩减，且未对线上功能造成任何破坏。
性能瓶颈与方案选型
早在2023年，Primer团队就注意到部分页面组件数量激增，导致原有的CSS-in-JS解决方案暴露出显著的性能问题：客户端初始化样式拖慢了首屏加载，服务端渲染性能下降，且样式更新难以维护。
为从源头解决这些问题，团队选择了CSS Modules作为替代方案。该方案允许开发者编写原生CSS，同时保留样式封装能力，避免全局选择器冲突。更重要的是，它消除了客户端和服务端的运行时开销，样式直接打包为CSS文件随HTML发送。
Primer组件的增量迁移
鉴于迁移涉及Primer及GitHub中所有相关组件，团队采取了严格的增量迁移策略，确保零破坏：
- 将现有样式转换为CSS Modules文件；
- 引入功能标志（Feature Flag），支持新旧样式切换；
- 通过视觉回归测试验证快照一致性；
- 按团队、内部员工、全量用户的顺序逐步灰度发布。
截至2024年12月，Primer所有组件均完成迁移。性能收益显著：服务端渲染页面时间减少55%，组件初始化时间减少25%。
攻克sx Prop与styled-components
Primer迁移完成后，更大的挑战在于GitHub代码库中广泛使用的
为此，GitHub创建了过渡库@primer/styled-react，允许在新迁移的组件中继续使用
迁移过程分为两个阶段：
- 初期人工+自动化：8名工程师轮换，配合内部开发的VS Code插件和codemod工具，在6个月内迁移了6,419个props。期间观察到部分页面服务端渲染性能提升1%至22%。
- AI加速收尾：2026年4月，随着Copilot编码代理能力的提升，仅剩的895个props由2名工程师借助AI在3周内全部清零。
值得注意的是，在迁移高峰期，styled-components宣布进入维护模式，进一步验证了该技术路线的正确性。
主题解耦与最终收官
移除styled-components的耦合。GitHub支持7种主题及其高对比度变体，此前依赖JS运行时。团队通过将主题变量完全移至CSS层，并经过两个月的灰度测试，成功实现了主题与代码的解耦。
截至2026年6月，GitHub已100%运行在CSS Modules之上，彻底移除了styled-components和styled-system依赖。这场历时数年的重构，不仅消除了技术债务，更在不中断服务的前提下，显著提升了产品的性能与用户体验。