【CSS】1859- 原子化真的是現(xiàn)代前端CSS的救星嗎

本文作者系360奇舞團(tuán)前端開發(fā)工程師

文章標(biāo)題：從 Tailwind CSS 到 UnoCSS —— 原子化真的是現(xiàn)代前端CSS的救星嗎

小編前言

追憶往昔，穿越前朝，CSS也是當(dāng)年前端三劍客之一，風(fēng)光的很，隨著前端跳躍式的變革，CSS在現(xiàn)代前端開發(fā)中似乎有點(diǎn)默默無聞起來。

不得不說當(dāng)看到UnoCss之前，我甚至都還沒聽過原子化CSS^[1]這個概念（不夠卷，慚愧，慚愧），很久沒關(guān)注過CSS相關(guān)的內(nèi)容了。

原子化CSS本身的概念和 Tailwind CSS、UnoCSS^[2] 設(shè)計(jì)都比較簡單，這里主要想聊一下在現(xiàn)代前端中，原子化CSS到底是不是完美的解決方案，是不是解決CSS問題的正確方向。

概念-原子化CSS

原子化 CSS 是一種 CSS 的架構(gòu)方式，它傾向于小巧且用途單一的 class，并且會以視覺效果進(jìn)行命名。

聽起來厲害，但實(shí)現(xiàn)的最終方式超級簡單，核心就是預(yù)置一大堆 class 樣式，盡量將這些 class 樣式簡單化、單一化，在開發(fā)過程中，可以直接在 DOM 中寫預(yù)置好的 class 名快速實(shí)現(xiàn)樣式，而不需要每次寫簡單枯燥大量的 css 樣式，如下代碼所示：

1. 先預(yù)置一組class列表

.m-10 { margin: 10px; }
.p-5 { padding: 5px; }
.text-red { color: red; }
 // 無數(shù)個....

2. 編碼時在dom中直接寫class名，快速實(shí)現(xiàn)樣式

<div class="m-10 p-5 text-red">
  測試dom
</div>

而預(yù)置的class列表中的樣式，有著一定的規(guī)律，開發(fā)者可以通過學(xué)習(xí)快速掌握，利用多個class在dom中的組合快速實(shí)現(xiàn)效果

????，是不是看起來有點(diǎn)熟悉？（死去的 Bootstrap 攻擊我），所以你覺得這是冷飯新炒，還是實(shí)用主義？

Tailwind CSS 廣受歡迎

在 tailwindcss 的 github^[3] 上目前居然已經(jīng)有了 70.8K  個 star ！！，最開始我是難以置信它竟會如此受歡迎的，npm 周下載量也超六百多萬 。

Tailwind CSS 主張讓你無需離開 HTML 即可快速構(gòu)建網(wǎng)站，并有許多非常非常實(shí)用的優(yōu)點(diǎn)：

• 對 class 極致的封裝，最大程度提高復(fù)用性
• 易擴(kuò)展的的各種自定義配置
• 構(gòu)建時清除未引用的 css 樣式，解決生產(chǎn)環(huán)境 CSS 冗余的問題
• 舒適的響應(yīng)式開發(fā)體驗(yàn)
• 函數(shù)、指令、布局、動畫，......等等

幾乎囊括了開發(fā)者日常原生 CSS 開發(fā)中遇到的所有頭痛，不舒服的開發(fā)體驗(yàn)，所以說他確實(shí)是很實(shí)用的工具。Tailwind CSS 真的是為前端開發(fā)者造福了。

在前端構(gòu)建工具鏈中 Tailwind CSS 作為 PostCSS^[4] 插件可與其他預(yù)處理器^[5]結(jié)合使用，并優(yōu)化生成的 CSS 文件。。

UnoCSS

Tailwind CSS 在過去幾年廣受歡迎，近兩年 UnoCSS 又脫穎而出，這里需要先夸一下 UnoCSS 官網(wǎng)的圖標(biāo)&文字&背景色的色彩漸變聯(lián)動主題，很酷！！

按 UnoCSS 作者的說法，UnoCSS 并非要替代 Tailwind CSS 而是從另一個角度使原子化CSS在業(yè)務(wù)中融合的更完美。

UnoCSS 作者是 Vite 團(tuán)隊(duì)成員，我覺得正是因?yàn)樗鳛?Vite 的開發(fā)者，對于工程化構(gòu)建具有很高的敏感度，所以才能創(chuàng)造出 UnoCSS 將原子化的CSS與前端工程融合到極致。

那么 UnoCSS 做了哪些事呢：

1. 按需生成
• 生成業(yè)務(wù)真正使用到的 class ，同時在開發(fā)和生產(chǎn)環(huán)境使用
• 對比 Tailwind CSS 只在生產(chǎn)環(huán)節(jié)清除無引用代碼，UnoCSS 在開發(fā)環(huán)節(jié)也通過文件監(jiān)聽按需傳輸，獲得更快地性能（雖然已經(jīng)很快了，但再快一點(diǎn)總歸是個提升嘛）

2. 極具靈活性

• UnoCSS 對自己定位是一個 CSS 引擎而非一個框架，所以它與 Tailwind CSS 應(yīng)該是包含關(guān)系，UnoCSS 作為規(guī)則的制定者，而 Tailwind CSS 可以作為其中的一組 preset

  import UnocssPlugin from '@unocss/vite'
  
  import PresetTachyons from '@unocss/preset-tachyons'
  import PresetBootstrap from '@unocss/preset-bootstrap'
  import PresetTailwind from '@unocss/preset-tailwind'
  import PresetWindi from '@unocss/preset-windi'
  import PresetAntfu from '@antfu/oh-my-cool-unocss-preset'
  
  export default {
    plugins: [
      UnocssPlugin({
        presets: [
          // PresetTachyons,
          PresetBootstrap,
          // PresetTailwind,
          // PresetWindi,
          // PresetAntfu
          // 選擇其中一個...或多個！
        ]
      })
    ]
  }
  

• 屬性化書寫 class 名

  // 將冗長的 calss 按類型區(qū)分，更方便閱讀理解
  <button class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-blue-500 dark:hover:bg-blue-600">
    Button
  </button>
  
  // 改變?yōu)?br><button 
    bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
    text="sm white"
    font="mono light"
    p="y-2 x-4"
    border="2 rounded blue-200"
  >
    Button
  </button>
  

• 在自定義規(guī)則上，UnoCSS 提供更加靈活的靜態(tài)&動態(tài)匹配規(guī)則

• 編譯進(jìn)一步優(yōu)化（比如不再解析AST），生產(chǎn)構(gòu)建速度再度提升

UnoCSS 等于是做了個更上層的引擎，以后再有新的原子化CSS框架也可以兼容進(jìn)來了，省得你有選擇困難癥。

原子化CSS并非現(xiàn)代前端CSS的救星

Tailwind CSS 與 UnoCSS 的特性和使用方法并非本文主要想講的，具體細(xì)節(jié)大家可移步官網(wǎng)查看，這里主要想討論下

Tailwind CSS 或 UnoCSS 的原子化CSS 會是現(xiàn)代前端解決CSS問題的最佳實(shí)踐嗎？

我覺得答案是否定的

從我的直接觀感，原子化CSS更像是一個輔助型的實(shí)用工具，而非CSS問題的解決方案，作為輔助工具，它確實(shí)是能在某類業(yè)務(wù)場景或者業(yè)務(wù)發(fā)展的某個階段提供非常大的幫助，但從整個復(fù)雜多變的前端業(yè)務(wù)場景上看，它的能力是有限的。

• 最直觀的的結(jié)果就是當(dāng)業(yè)務(wù)復(fù)雜度提升到某個階段后，原子化CSS的性價比將急劇下降，帶來的HTML代碼冗余，可讀性差，難以維護(hù)的問題將直接影響到業(yè)務(wù)開發(fā)。

• 尤其是現(xiàn)在無論是 Vue 的單文件組件還是 React 的函數(shù)式組件，都會將部分 JS 邏輯注入 HTML 中，如果 CSS 邏輯也要通過 class 名組合的方式注入其中，那就太混亂了。

• 但 Vue 或 React 各自的組件化設(shè)計(jì)思想，都可以通過各自的組件化拆分來解決代碼冗余的問題，使其可適用于各種簡單&復(fù)雜的業(yè)務(wù)場景，是一套完善的最佳實(shí)踐，而原子化CSS 沒有辦法做組件化拆分的，所以隨著業(yè)務(wù)復(fù)雜度的上升，代碼冗余遲早會發(fā)生，這直接限制了此類框架的普及，所以它無法作為前端CSS問題的根本解決方案。

從設(shè)計(jì)思想上，原子化CSS看起來也與目前主流的組件化，函數(shù)式編程顯得格格不入。

適用場景

在一些簡單的業(yè)務(wù)場景上，原子化CSS確實(shí)有非常大的優(yōu)勢，比如快速開發(fā)響應(yīng)式H5，業(yè)務(wù)復(fù)雜度低的中后臺系統(tǒng)，簡單的官網(wǎng)頁面。

而在一些復(fù)雜的業(yè)務(wù)場景，比如復(fù)雜的C端業(yè)務(wù)，大型的系統(tǒng)就不在那么適用了。

聲明

原創(chuàng)文章，轉(zhuǎn)載請注明作者和文章原鏈接 從 Tailwind CSS 到 UnoCSS —— 原子化真的是前端CSS的救星嗎^[6]

參考資料