認識 Tailwind CSS

Hugo 昨天(2024-06-25)發布了 v0.128.0,其 release note 提到這次加入了 TailwindCSS v4 (alpha)。我對前端技術相當陌生,以前聽過 Tailwind,但從未花時間去了解它。由於我的文件網站和部落格都使用 Hugo,所以這次花了一點時間去了解什麼是 Tailwind CSS,以及它有什麼特別之處。

首先,我從 Tailwind CSS 官網看到這句話:

"Best practices" don't actually work.

這引發了我的好奇心,便順著那句話底下提供的連結點進去這篇文章:

CSS Utility Classes and "Separation of Concerns"

該文的發表日期是 2017 年 8 月 7 日,作者便是 Tailwind CSS 的創始人 Adam Wathan。我仔細讀完後,覺得這篇文章清楚闡述了 Tailwind CSS 的由來和設計理念,頗有收穫。

作者用一個實際的例子來解釋他是如何一步一步地降低 HTML 和 CSS 之間的耦合,最終達到他覺得比較理想的樣子:許多精心規劃和命名的 CSS classes,方便以組合的方式重複使用樣式;除了能讓版面風格趨向一致,也能減少日後維護 CSS 的成本、避免 CSS 繼承造成的混亂。

"Separation of Concerns" 是個迷思

作者在文中提到,"Separation of Concerns" 在這裡是個迷思(原文為 straw man,即稻草人謬誤)。這句話僅只是針對 HTML 與 CSS 之間的依賴關係來說的。他的意思是,SoC 並不適合用於思考 HTML 與 CSS 之間的關係,否則容易陷入非黑即白的陷阱——只要沒有符合 SoC 原則就會被認定是糟糕的設計。

作者認為應該要思考的是依賴的方向(dependency direction)。有兩個方向:

  1. CSS 依賴 HTML
    這種設計方式,HTML 裡面主要是文件內容,至於樣式的部分,則會基於 HTML 的文件結構來撰寫 CSS 類別。最終的成品傾向於讓 HTML 盡量單純(很少 CSS),以便只要更換一整套的 CSS 就能切換網頁的風格樣式。這種設計大抵可以宣稱符合 Separation of Concerns 原則。
  2. HTML 依賴 CSS
    撰寫 CSS 的時候,樣式名稱會以比較通用的「功能」來命名,例如 .btn.btn-primary.card 等等,而不會涉及特定內容或領域知識(例如 .author-form)。

Bootstrap 和 Tailwind CSS 的設計都屬於第二種,也就是 HTML 依賴 CSS。

延伸閱讀

我也一併讀了文中引用的其他文章,其中有兩篇我覺得也值得一讀(特別是像我這種不熟前端技術的人):

這篇筆記只是記錄自己的一點閱讀心得,就先寫到這裡吧。如果你也有興趣了解,網路上可以找到許多前輩分享的文章,例如:Tailwind CSS 新手上路:概念、安裝與工具推薦。之所以提這篇文章,是因為我覺得它開頭那張圖特別好笑,反映了一些人對 Tailwind CSS 的想法轉變歷程——從一開始的嫌惡之情,到使用之後發覺「真香」,從此成為愛用者。

Keep learning!

Last modified: 2024-07-09