GitHub 砍掉 CSS-in-JS，樣式改回原生 CSS
The GitHub Blog（Engineering）· 2026-09-25
GitHub 把 github.com 上原本用 styled-components 與 styled-system 撐起的 CSS-in-JS 樣式系統，全面換成建置期就能產出的 CSS Modules。這篇由 Josh Black 與 Marie Lucca 共同撰寫的文章詳細說明了這場橫跨兩年多的遷移，從 2023 年發現效能問題開始，一路做到 2026 年 6 月全站 CSS Modules 覆蓋率達到 100%。
背景：樣式邏輯全部丟給瀏覽器運算
在舊架構下，頁面的樣式要等 JavaScript 執行到一半才會被算出來，因為 styled-components 與基於它的 sx prop 都是在執行期才把樣式物件轉成實際的 CSS 規則。文章直接點出兩個症狀：「初始頁面載入時間變長，因為樣式是在客戶端才被初始化」，以及「隨著樣式蒐集工作從客戶端接手，伺服器端渲染的效能跟著下滑」。GitHub 的元件庫還支援七種主題（含高對比變體），這些主題切換全部仰賴 styled-components 的 JavaScript 工具函式才能運作。文章形容，隨著元件數量暴增，「樣式更新已經失控」，維護成本本身就成了效能問題之外的另一個負擔。
核心改動：先換元件庫，再換整站 sx prop
遷移分兩階段走。第一階段鎖定 Primer 設計系統本身：到 2024 年 12 月，Primer 全部元件改用 CSS Modules 後，伺服器端渲染時間減少 55%，元件初始化速度加快 25%。第二階段從 2025 年 4 月開始，目標是清掉全站散落的 sx prop 用法，當時待遷移數量高達 7,760 個。團隊靠一支 VS Code 外掛（由 Ian Sanders 開發，用來把 sx prop 自動轉成 CSS Modules 的 className）加上內部 codemod，用 8 位工程師輪班的方式，六個月內處理掉 6,419 個。每次替換都搭配 feature flag 讓新舊樣式並存，並用視覺回歸測試比對畫面像素差異，再依序從內部團隊、GitHub 員工、最後才推到所有使用者。
最後剩下的 895 個 sx prop 最難處理，因為都是邊角案例。GitHub 在 2026 年 4 月到 6 月改派 GitHub Copilot coding agent 去啃這批殘留用法，三週內就把 895 個降到 0，整個遷移在 2026 年 6 月正式收尾，全站 CSS Modules 覆蓋率達到 100%。實際成效反映在頁面渲染時間上：文章列出的多個頁面伺服器端渲染時間改善幅度落在 1% 到 22% 之間，其中 commit 檢視頁（github/code_view / commit）提升最多，達到 21.97%。
| 指標 | CSS-in-JS（遷移前） | CSS Modules（遷移後） |
|---|---|---|
| Primer 元件 SSR 時間 | 基準值 | 減少 55% |
| 元件初始化時間 | 基準值 | 加快 25% |
| 全站 sx prop 數量 | 7,760 | 0 |
| commit 檢視頁 SSR | 基準值 | 提升 21.97% |
影響範圍：仍在用 sx prop 或 styled-react 的團隊要留意
直接受影響的是 所有依賴 @primer/react 建構介面的前端工程師，尤其是還在用 sx prop 寫樣式、或依賴 styled-components 做主題切換的程式碼。GitHub 為了不讓外部消費者的程式碼一次壞掉，另外拉出一個過渡用的 @primer/styled-react 套件，把舊的 styled-components API 包成相容層，讓外部仍可以照舊方式呼叫，內部再逐步淘汰。若團隊的元件庫也建立在 Primer 之上，需要檢查專案是否還吃 @primer/css 或直接引用 styled-system 的樣式函式，並確認七套主題（含高對比模式）在切到 CSS Modules 後仍能正確套用。負責效能監控的團隊也該重新檢視伺服器端渲染的量測基準，因為樣式計算已經從執行期搬到建置期，舊的效能基線可能不再適用。
原始來源：The GitHub Blog - Improving site performance by shipping more CSS