現(xiàn)在（2022）的Web開(kāi)發(fā) 在工具選擇上 真是太多了，就「前端樣式」 [注] 一項(xiàng)任務(wù)就有很多技術(shù)供選擇，本文說(shuō)說(shuō)CSS三項(xiàng)主流技術(shù)的特點(diǎn)和區(qū)別。

注：web開(kāi)發(fā) 可分為 后端（RH開(kāi)發(fā)的MVC），前端（V組件的 UI結(jié)構(gòu)，樣式和交互）多種任務(wù)

本文在此文（ SASS vs CSS-in-JS vs TailwindCSS ）基礎(chǔ)之上改寫(xiě)而成，加入自己的見(jiàn)解。

Table of Contents

SASS

作為對(duì)「原生CSS」的功能擴(kuò)展，預(yù)處理技術(shù)（preprocessor）像SASS，相信是很多人一直以來(lái)的 CSS 開(kāi)發(fā)技術(shù)方案?！冈鶦SS」本身是很容易學(xué)，但寫(xiě)出來(lái)的“程序”很難維護(hù)?！鸽y維護(hù)」的意思是，當(dāng)項(xiàng)目增大時(shí)（包手增加人手），添加新功能和修改原來(lái)功能 都很費(fèi)勁。

提高「可維護(hù)性」的一點(diǎn)，是項(xiàng)目的「樣式功能」 必須有 一種客觀的結(jié)構(gòu) ，團(tuán)隊(duì)一致認(rèn)同的 「 樣式結(jié)構(gòu) 」，這樣可以降低編程維護(hù)時(shí)的推理成本。 BEM (Block Element Modifiers)  就是這樣的一種總結(jié)客觀樣式結(jié)構(gòu)的嘗試。

預(yù)處理技術(shù) 再加上 BEM 能提高 「樣式開(kāi)發(fā)和維護(hù)」體驗(yàn)，但是它們并不完美。還有一些需求是它們不能很好解決的。例如，隨著 代碼庫(kù)（codebase）的增長(zhǎng)和演化——新功能的添加和舊模塊的重構(gòu)，你常常要考慮 一項(xiàng)「特定的樣式定義」 應(yīng)該放在哪個(gè)文件上最好；你可能還要考慮「某個(gè)舊樣式定義」還有沒(méi)有被用，可不可刪除；或者，你還得考慮 性能問(wèn)題，因?yàn)槟憧隙〞?huì)質(zhì)疑 在 首頁(yè)就加載 所有樣式定義，而大部分的樣式定義 都在其它頁(yè)面才用。

CSS in JavaScript 就是針對(duì) 預(yù)處理技術(shù) 不能很好解決的這些問(wèn)題。

CSS-in-JS

「用JS來(lái)寫(xiě)樣式」 是一種思想（就像用JS來(lái)寫(xiě)HTML結(jié)構(gòu)定義），目前主要有幾種實(shí)現(xiàn)： Styled-Components, Emotion, and Styled-JSX 。

將 頁(yè)面分割成為不同的 UI組件，每個(gè)組件都有自己獨(dú)立的JS，CSS和HTML，這種思想的確很有新意，很吸引，因?yàn)?獨(dú)立封裝的組件在開(kāi)發(fā)、維護(hù)，和復(fù)用上會(huì)非常的容易。

將樣式集成入 UI組件，再也不用考慮 名字沖突 ，和全局結(jié)構(gòu)（BEM）的問(wèn)題，不用再考慮如何存放CSS定義的問(wèn)題了。

另外，也不用考慮 頁(yè)面會(huì)有多余的樣式定義而造成 性能問(wèn)題，因?yàn)橹挥薪M件被渲染頁(yè)面時(shí)，樣式定義才會(huì)被用。

CSS-in-JS技術(shù) 的學(xué)習(xí)和使用 看起來(lái) 要比 SASS技術(shù) 要復(fù)雜一些，因?yàn)閷W(xué)習(xí)曲線是有的。不過(guò)，如果你的項(xiàng)目 非常適用 組件化開(kāi)發(fā)，那學(xué)習(xí)和使用 CSS-in-JS 是很值得的。

TailwindCSS

什么 是TailwindCSS？TailwindCSS官方有幾個(gè)標(biāo)簽，第一 ，framework；第二，utility-first；第三，designs without leaving your HTML。這是什么意思，CSS框架？

首先看第三點(diǎn)，TailwindCSS 強(qiáng)調(diào)的是引入新的額外的技術(shù)（有變量的預(yù)處理）和開(kāi)發(fā)步驟（要編譯），它是原生CSS的；其次，TailwindCSS 是框架，有半成品，像 bootstrap；第三，utility-first 標(biāo)識(shí)出 這些 「框架半成品」的特點(diǎn)，它是一種更底層的 樣式定義工具；

總結(jié)得，TailwindCSS 以 utility 為單位 創(chuàng)建 樣式半成品的 「樣式框架」，而bootstrap的半成品則是 樣式，HTML和JS都有，是一個(gè)全能的前端框架。

什么是 utility ，這是學(xué)習(xí)和使用 TailwindCSS 的關(guān)鍵。

樣式開(kāi)發(fā)任務(wù)的主體是 樣式語(yǔ)句的編寫(xiě)。什么是 樣式語(yǔ)句？我們拿 編程語(yǔ)言的 命令語(yǔ)句來(lái)比較。

程序由「語(yǔ)句」組成，命令式語(yǔ)言以「命令語(yǔ)句」（操作符和操作值） 為編程單位，樣式編程的“語(yǔ)句”由選擇子（selector）和樣式定義組成；選擇子主要有tag，ID，和class；樣式定義則有風(fēng)格，布局和動(dòng)畫(huà)。這種設(shè)計(jì)會(huì)出現(xiàn)一種局面，就是完成同一個(gè)任務(wù)可以有多種 方式。但其實(shí)，「樣式編程」 在邏輯上只有一個(gè)，就是結(jié)目標(biāo)對(duì)象定義「樣式呈現(xiàn)」，同類(lèi)的對(duì)象 可以有相似甚至是相同樣式呈現(xiàn)，例如前景色，這樣同是二維呈現(xiàn)，一定存在一些邏輯相似的甚至是「一樣全局樣式」，它是對(duì)象無(wú)關(guān)的，它甚至是客觀的（這一點(diǎn)非常重要，它影響著代碼可理解性和可維護(hù)性），這就是utility。

utility 只是TailwindCSS的技術(shù)思想，TailwindCSS本身是一個(gè)樣式框架，TailwindUI甚至是個(gè)全面的 前端UI框架

TailwindCSS 有兩個(gè)缺點(diǎn)

1. 當(dāng)樣式很復(fù)雜時(shí)，類(lèi)名會(huì)太長(zhǎng)，影響閱讀性
2. 增加源文件的體積，不過(guò)我們可用 PurgeCSS 緩解這個(gè)問(wèn)題

小結(jié)

當(dāng)你的 web應(yīng)用的規(guī)模不斷增長(zhǎng) ，樣式 任務(wù)是個(gè)問(wèn)題，需要專(zhuān)業(yè)技術(shù)，和半成品，幫助快速有效的開(kāi)發(fā)。專(zhuān)業(yè)技術(shù)包括 樣式定義方式，組建復(fù)合樣式方式，管理復(fù)用方式等。