Skip to main content

CSS-in-JS 的優缺點

優點​

  • 沒有原生 CSS 容易重複命名的衝突（傳統使用 BEM 和 OOCSS，但這是基於「團隊共識」），在編譯的時候 CSS-in-JS 會對 className 序列化生成 unique name 避免命名衝突（ 但 CSS modules 也可以解決 ）
  • 以「元件」為單位的思考方式，和 JS 程式碼融合在一起進行模組化管理（ CSS modules 也可以，但一定要單獨拆分 CSS 檔出來 ）
  • 將 JS 變數無縫地融合進 CSS 裡

缺點​

效能，效能，還是效能

  • 依賴 Runtime 解析，增加運行的效能壓力
  • 程式碼的體積比較大
  • CSS-in-JS 會包額外的元件來實現樣式插入，ReactDevTools 看到的看到元件層級會比較複雜

runtime CSS-in-JS 的過程​

  • 解析 tagged template 裡的 CSS
  • 產生 unique class name
  • 預處理
  • 插入 <head>

styled-components vs emotion​

https://github.com/jsjoeio/styled-components-vs-emotion

  • emotion 比較小、比較快
  • emotion 支援 React Concurrent mode

CSS-in-JS vs Tailwind​

CSS-in-JS​

  • 比較高的可讀性，把 CSS 樣式化作有語意化的元件

Tailwind​

  • 原子化概念，所有東西都是由像是積木的 CSS 組起來的，所以 bundle size 不會永遠線性成長，專案越大，優勢越明顯
  • class name 的規則很有條理，用順手的話開發很快速，例如 mb-2, pb-2...
  • （個人認為）協作滿穩健的，大家都是用規格一樣的積木在組合 CSS
  • 客製化程度也可以很高
  • 編譯後就產生靜態的 CSS，沒有 CSS-in-JS 的問題
  • 缺點 class name 會超級長，看起來很醜，可讀性很不好，無法一眼看穿

改進辦法​

  • zero runtime 的 CSS-in-JS，ex: linaria
  • CSS modules
  • Tailwind

Reference​

精读《我们为何弃用 css-in-js》

The unseen performance costs of modern CSS-in-JS libraries in React apps

Reactjs.tw Meetup #14 | styled-components is dead | Evan Ye