CSS-in-JS 的成本是渲染期產生樣式與注入規則
runtime CSS-in-JS（例如 styled-components）在渲染期做兩件事：
- 產生樣式字串。
- 把 CSS 規則注入 document。
這兩件事都落在主執行緒上，和 React 的渲染搶同一份時間。把樣式生成移到建置期就能把這段工作整個拿掉。
Linear 的量測
| 指標 | 結果 |
|---|---|
| view-heavy 頁面的主執行緒 CPU 工作 | 減少約 20%–35% |
| 中階機器上的體感 | 約快 30% |
| 一次導覽注入的 CSS 規則數 | 數百條 → 0 條 |
三個數字量的不是同一件事，引用時要帶範圍；作者自己也先聲明端到端影響難以歸因，因為它和其他效能優化交織在一起。
什麼時候才值得換
Linear 的最後一根稻草不是數字，是維護狀態：升級 React 18（concurrent rendering）後出現效能退化，而 styled-components 已進入維護模式。