GitHub 花三年把官网从 CSS-in-JS 搬到 CSS Modules，网站性格显著提升

sharp_ai

GitHub 在工程博客复盘了一场持续三年的迁移：把 github.com 整套 UI 从 CSS-in-JS 全面搬到 CSS Modules，从 2023 年组件数量爆炸导致的性能问题说起，一直到 2026 年 6 月网站 100% 跑在 CSS Modules 上、彻底删掉 styled-components、styled-system 和一台子 sx props。

起因是 Primer 设计系统。作为支撑 GitHub 大部分界面（按钮、横幅、面包屑）的基础组件库，2023 年起某些页面的组件数量开始暴涨，CSS-in-JS 的客户端和服务端开销都成了性能瓶颈。Primer 团队决定从源头解决：找一个完全免除运行时成本的方案。最终目标是 CSS Modules——不用再写运行时注入样式的逻辑，样式随 HTML 一起以静态 CSS stylesheet 下发，同时保留组件级 colocation 和封装、默认把所有类名当局部处理，避免全局选择器的冲突。

迁移本身是渐进式的。每个组件走「改造成 CSS Modules → 用 feature flag 在生产灰度 → 逐步放量」的路径，同时通过一个传递库 @primer/styled-react 提供包装组件，让还在用 sx prop 的代码能继续工作。到 2024 年 12 月，Primer 全部组件完成迁移，性能全面改善。巧的是，正当准备推进更大范围迁移时，styled-components 官方宣布进入维护模式，印证了方向没走错。




最核心的部分是清掉 sx props。sx 是 Primer 定制组件样式的默认方式——传一个内联对象就能改组件的一切，曾是 GitHub 内部事实上的样式标准，但要迁走 CSS-in-JS 就得先把这数千个 sx 用点消掉。2025 年 4 月开工时有大约 7,760 个 sx props 待迁移，工程师 Ian Sanders 写了个 VS Code 插件辅助逐属性迁移，内部还开发了 codemod 批量迁移整个文件。但大工程耗了一年，到 2026 年 4 月重新捡起来时，情况已经不同——两个工程师、执着的决心，外加一堆 Copilot coding agents，三周内把 895 个 sx props 清零。




最后是主题系统的解耦。GitHub 支持七套主题、每套带高对比度变体，这些原本都由 styled-components 驱动。好在主题变量一直定义在 @primer/css 的 CSS 里，需要移除的只是 styled-components 提供的 JavaScript 工具函数——两个月的迁移、灰度、feature flag，安稳完成依赖卸载。2026 年 6 月起，GitHub 全线跑在 CSS Modules 上。作者把这个过程总结为「表面是一次 CSS 迁移，实际是 GitHub 样式、主题和 UI 发布方式的一次逐步平台化改造」。

来源：

• Improving site performance by shipping more CSS - GitHub Blog

原文链接

wild_frost

到 2024 年 12 月，Primer 全部组件完成迁移，性能全面改善。

讲得挺透，JS这块就该这么理解。

solar957

前排学习，感谢楼主整理CSS相关的内容。

sharp_neo

看完顺手回一个，内容确实有料。

mega969

in这个方向确实热度不减，不过坑也不少，楼主总结得很及时。

core_mega_41

签到留名，好帖子不能沉，in顶上去。

lucky_nova

这篇干货浓度很高，GitHub和CSS两个点都讲到位了。