一家以工程效率著称的团队协作工具公司，最近完成了从 styled-components 到 Meta StyleX 的大规模迁移：超过 1000 个 Pull Request、约 5 个月时间，今年 8 月初收尾。Linear 官方给出的收益是：视图重的页面主线程工作量下降 20% 到 35%，中端机器上页面导航快约 30%，页面切换时新注入的 CSS 规则为零。
这样的数字乍看像是常见的大厂性能优化叙事。但值得注意的是，主导迁移的工程师 Kenneth Skovhus 并未手动重写样式，而是编写了一个确定性的 codemod，自动生成 500 多个 PR，改动约 10 万行代码。另一个不太像性能指标的理由更值得琢磨：Linear 认为 styled(Button) 这种模式让外部改组件样式太容易，团队希望把这个口子封住，因为在越来越多代码由 agent 生成的现实下，没人能持续管住外部样式往 Button 上堆什么。
为了验证这套迁移背后的机制差异，一位开发者在 Node v22.23.2 环境中复现了对比实验：styled-components 6.5.3、StyleX 0.19.1、React 18.3.1。重点不是重复官方口径，而是拆开两种 CSS 方案在大型工程里的真实成本结构。
styled-components 的运行时成本：组合数越多，首次触达越重
styled-components 的机制相对直观：样式写在带插值的模板字符串里，真正的 CSS 要等组件渲染时才生成，再注入页面的