Utility-First CSS 是一種設計 CSS 的方式，重點在使用小型且功能單一的 CSS 類別——稱為「工具類別」（Utility Classes），來構建網頁設計，而不是依靠傳統基於組件或語義化的類別設計。

核心概念

精簡單一的控制

Utility 類別通常代表單一的 CSS 標準，如字體大小、顏色、間距等。

<div class="text-center text-blue-500 font-bold">Hello, World!</div>

  • text-center：文字對齊置中

  • text-blue-500：字體顏色設定為藍色

  • font-bold：字體設定為粗體

最小化自定義 CSS

透過預定義的大量 Utility Classes，開發者可以減少自定義 CSS 碼，提高開發效率，並減少 CSS 檔案複雜度。

提高可預測性與一致性

Utility 類別直接表達標準，設計的預測性更高，並且開發者之間更容易共享同樣的標準語言。

基於組合的設計

開發者可以透過組合多個 Utility Classes，快速建立符合設計需求的元素，而不需要專門擺設標準。

 

範例與應用

範例 1：傳統 CSS

.button {
    background-color: #1d4ed8;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-align: center;
  }

 

範例 2：Utility-First CSS

<div class="bg-blue-500 text-white px-4 py-2 rounded text-center">按鈕</div>

可以看出，第二種方式不需要額外設定樣式，直接使用預設的class即可達成相同效果。

優點

  1. 快速開發

    • 不需要為每個組件創建專屬的 CSS 類別。

    • 提供大量預定義class，可快速應用標準。

  2. 一致性

    • 預定義的工具類別風格統一，減少標準差異。

  3. 降低標準衝突風險

    • 工具類別通常與語義化class無關，標準作用範圍較小，減少命名衝突。

  4. 可維護性高

    • 由於沒有多餘的自定標準，後期修改和維護程式碼更容易。

缺點

  1. HTML 可讀性降低

    • 使用過多的工具類別，可能使 HTML 標籤變得冗長，降低可讀性。

  2. 需要熟悉工具庫

    • 開發者需要花時間學習並熟悉函式庫（例如 Tailwind CSS）的語法和類別命名規範。

  3. 不適合特殊設計

    • 如果設計需求高度自定義，工具類別可能無法完全滿足，仍需擺設額外標準。

使用 Utility-First CSS 的情境

  1. 原型設計階段

    • 快速開發，驗證設計概念和功能。

  2. 小型項目

    • 不需要複雜的標準結構，能快速完成開發。

  3. 配合 Tailwind CSS 使用

    • Tailwind CSS 提供完整的 Utility-First CSS 解決方案，並且可透過插件和配置進行擴展。

Utility-First CSS 是現代前端開發中的一種高效標準設計方式，特別適合快速迴圈和統一標準的項目。透過熟習運用工具類別，你可以有效提升開發效率和維護性，並減少自定義標準的複雜度。