CSS樣式開發未來的三項技術——SASS、CSS-in-JS和TailwindCSS

語言: CN / TW / HK
時間 2022-03-22 02:13:16

現在（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 有兩個缺點

  1. 當樣式很複雜時，類名會太長，影響閱讀性
  2. 增加原始檔的體積，不過我們可用 PurgeCSS 緩解這個問題

小結

當你的 web應用的規模不斷增長 ，樣式 任務是個問題，需要專業技術，和半成品，幫助快速有效的開發。專業技術包括 樣式定義方式，組建複合樣式方式，管理複用方式等。

參考

「」
「」