A5站长网10月5日消息，GitHub在工程博客里公开了一桩历时三年的前端重构：把主站从CSS-in-JS整体迁到CSS Modules，最终把styled-components、styled-system和sx属性全部从产品里删干净。团队给出的两个数字是服务端渲染时间降低55%，页面组件初始化时间降低25%。迁移从2023年开始，2026年6月收尾。
起点是运行时开销。styled-components的特点是通过JavaScript运行时注入样式，这段代码客户端要跑、服务端也要跑。GitHub不是小应用——部分页面的组件数量涨到很密，团队发现这套运行时的开销在客户端和服务端两侧都开始体现出来。所以他们没换另一个样式库，而是往回退，退到最不炫的那个选项：纯CSS，以模块形式和组件并排放在一处。
收益的量级来自一组内部对比数据。1000个组件的基准测试下，运行时注入CSS需要242毫秒，静态CSS文件只要96毫秒。CSS Modules的价值在于零运行时——构建时把类名改写成唯一名字，按文件作用域隔离，浏览器拿到的就是一份随页面HTML一起下发的样式表，服务端渲染时不需要收集样式，也没有任何代码需要执行。
最难啃的不是设计系统本身，是sx这个属性。sx是Primer的特性，允许任何团队往组件里直接注入行内样式对象。设计系统迁移完，挂在上面几千个组件的sx调用还都在。GitHub为此做了个包装库`@primer/styled-react`保证过渡期不断，然后从2025年4月开始清理，高峰期有大约7760处sx需要迁移。
人工和自动各扛了一半。团队做了个VS Code插件逐个转换，再加一个内部codemod处理整文件迁移，8个人用6个月完成了6419处，在相关页面上服务端渲染速度提升1%到22%。剩下895处停在那里等了很久——2026年4月重开时，2个人用Copilot编码agent三周清零。最后是主题层：7套主题每套还有高对比度变体，都通过styled-components工具类连线，底层变量本来就在CSS里，剩下解耦又花了两个月。
GitHub的迁移方法本身值得站长抄。四步循环：先把现有样式转成一个CSS Modules文件；把组件放到feature flag后面做新旧切换；跑已有的视觉回归测试，要求新旧版本快照完全一致；然后按Primer团队、全体员工、全量用户三档放开。回归测试在迁移开始之前就已经存在，这是整个计划能安全推进最不显眼也最关键的前提。flag在这里有两个用途——回滚和测量，同一个开关两用。
需要说清楚的边界：GitHub没有公布基线绝对时间、测了哪些页面、这些百分比背后的分位数。所以这份数据能支撑的判断是「删掉一段关键路径上的运行时是值的」，不能支撑「你的站也能快55%」。收益大小取决于组件数量、是否服务端渲染、原本样式库的开销占多少。一个只有十几个组件的站，删来删去也就那点事；一个有几百个服务端渲染组件的中型站，才真正在这个量级。
申请创业报道，分享创业好点子。点击此处，共同探讨创业新机遇！
