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

語言: CN / TW / HK

現在(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應用的規模不斷增長 ,樣式 任務是個問題,需要專業技術,和半成品,幫助快速有效的開發。專業技術包括 樣式定義方式,組建複合樣式方式,管理複用方式等。

參考