CSS樣式開發未來的三項技術——SASS、CSS-in-JS和TailwindCSS
現在（2022）的Web開發 在工具選擇上 真是太多了，就「前端樣式」 [注] 一項任務就有很多技術供選擇，本文說說CSS三項主流技術的特點和區別。
注：web開發 可分為 后端（RH開發的MVC），前端（V組件的 UI結構，樣式和交互）多種任務
本文在此文（ SASS vs CSS-in-JS vs TailwindCSS ）基礎之上改寫而成，加入自己的見解。
Table of Contents
SASS
作為對「原生CSS」的功能擴展，預處理技術（preprocessor）像SASS，相信是很多人一直以來的 CSS 開發技術方案。「原生CSS」本身是很容易學，但寫出來的“程序”很難維護。「難維護」的意思是，當項目增大時（包手增加人手），添加新功能和修改原來功能 都很費勁。
提高「可維護性」的一點，是項目的「樣式功能」 必須有 一種客觀的結構 ，團隊一致認同的 「 樣式結構 」，這樣可以降低編程維護時的推理成本。 BEM (Block Element Modifiers) 就是這樣的一種總結客觀樣式結構的嘗試。
預處理技術 再加上 BEM 能提高 「樣式開發和維護」體驗，但是它們并不完美。還有一些需求是它們不能很好解決的。例如，隨著 代碼庫（codebase）的增長和演化——新功能的添加和舊模塊的重構，你常常要考慮 一項「特定的樣式定義」 應該放在哪個文件上最好；你可能還要考慮「某個舊樣式定義」還有沒有被用，可不可刪除；或者，你還得考慮 性能問題，因為你肯定會質疑 在 首頁就加載 所有樣式定義，而大部分的樣式定義 都在其它頁面才用。
CSS in JavaScript 就是針對 預處理技術 不能很好解決的這些問題。
CSS-in-JS
「用JS來寫樣式」 是一種思想（就像用JS來寫HTML結構定義），目前主要有幾種實現： Styled-Components, Emotion, and Styled-JSX 。
將 頁面分割成為不同的 UI組件，每個組件都有自己獨立的JS，CSS和HTML，這種思想的確很有新意，很吸引，因為 獨立封裝的組件在開發、維護，和復用上會非常的容易。
將樣式集成入 UI組件，再也不用考慮 名字沖突 ，和全局結構（BEM）的問題，不用再考慮如何存放CSS定義的問題了。
另外，也不用考慮 頁面會有多余的樣式定義而造成 性能問題，因為只有組件被渲染頁面時，樣式定義才會被用。
CSS-in-JS技術 的學習和使用 看起來 要比 SASS技術 要復雜一些，因為學習曲線是有的。不過，如果你的項目 非常適用 組件化開發，那學習和使用 CSS-in-JS 是很值得的。
TailwindCSS
什么 是TailwindCSS？TailwindCSS官方有幾個標簽，第一 ，framework；第二，utility-first；第三，designs without leaving your HTML。這是什么意思，CSS框架？
首先看第三點，TailwindCSS 強調的是引入新的額外的技術（有變量的預處理）和開發步驟（要編譯），它是原生CSS的；其次，TailwindCSS 是框架，有半成品，像 bootstrap；第三，utility-first 標識出 這些 「框架半成品」的特點，它是一種更底層的 樣式定義工具；
總結得，TailwindCSS 以 utility 為單位 創建 樣式半成品的 「樣式框架」，而bootstrap的半成品則是 樣式，HTML和JS都有，是一個全能的前端框架。
什么是 utility ，這是學習和使用 TailwindCSS 的關鍵。
樣式開發任務的主體是 樣式語句的編寫。什么是 樣式語句？我們拿 編程語言的 命令語句來比較。
程序由「語句」組成，命令式語言以「命令語句」（操作符和操作值） 為編程單位，樣式編程的“語句”由選擇子（selector）和樣式定義組成；選擇子主要有tag，ID，和class；樣式定義則有風格，布局和動畫。這種設計會出現一種局面，就是完成同一個任務可以有多種 方式。但其實，「樣式編程」 在邏輯上只有一個，就是結目標對象定義「樣式呈現」，同類的對象 可以有相似甚至是相同樣式呈現，例如前景色，這樣同是二維呈現，一定存在一些邏輯相似的甚至是「一樣全局樣式」，它是對象無關的，它甚至是客觀的（這一點非常重要，它影響著代碼可理解性和可維護性），這就是utility。
utility 只是TailwindCSS的技術思想，TailwindCSS本身是一個樣式框架，TailwindUI甚至是個全面的 前端UI框架
TailwindCSS 有兩個缺點
- 當樣式很復雜時，類名會太長，影響閱讀性
- 增加源文件的體積，不過我們可用 PurgeCSS 緩解這個問題
小結
當你的 web應用的規模不斷增長 ，樣式 任務是個問題，需要專業技術，和半成品，幫助快速有效的開發。專業技術包括 樣式定義方式，組建復合樣式方式，管理復用方式等。
