如果你寫了好幾年 CSS，你肯定經歷過方法論之爭。BEM 給了我們有效的命名規則，但看起來很醜。OOCSS 承諾可重用性。SMACSS 給了我們分類。ITCSS 給了我們各層。然後像 Tailwind 這樣的效用優先框架出現了，讓我們一半的人質疑我們對 CSS 架構的所有認識。

HUG CSS 是一種較新的方法論，在 2025 年和進入 2026 年時獲得了關注，它採取了令人耳目一新的簡潔方法。HUG 不是複雜的命名規則或數十個效用類，而是將你的樣式組織成僅三層：Helpers、Utilities 和 Globals。這就是名稱的由來。這不是一場革命，而是對實際有效方法的務實綜合。

過去一年我一直在客戶專案中使用 HUG。對於想要結構但不要繁瑣的團隊，它已成為我的預設推薦。讓我帶你了解它的運作原理、何時表現出色，以及它的不足之處。

目錄

HUG CSS 方法論詳解：2026 年實用指南

什麼是 HUG CSS？

HUG CSS 是一種輕量級方法論，用於將樣式表組織成三個不同的層，每層都有明確的用途和特異性層級。名稱是一個縮寫詞：

  • H — Helpers（設計代幣、自訂屬性、mixins）
  • U — Utilities（單一用途的效用類）
  • G — Globals（元件和佈局樣式）

核心想法：你寫的每一行 CSS 都完全屬於這三層中的一層。沒有關於什麼東西應該放在哪裡的模稜兩可。Helpers 定義你的設計系統的原始值。Utilities 提供可重用、可組合的類。Globals 處理其他一切 — 你的實際元件樣式、頁面佈局、元素特定的規則。

HUG 與 ITCSS（有七層）的不同之處在於它的刻意簡潔。三層很容易在五分鐘內向初級開發者解釋。在程式碼審查中易於實施。而且它的擴展性出人意料地好，因為邊界很清晰。

HUG 於 2024 年末由 CSS 社區正式化為一種方法論，借鑑了許多開發者已經在直覺上使用的模式。隨著開發者尋求介於「隨便寫 CSS」和「每個類都必須遵循這份 47 頁命名規則」之間的替代方案，它在 2025 年獲得了動力。

三層詳解

Helpers：你的設計系統基礎

Helpers 層是你定義設計系統原始構建塊的地方。可以將其視為你的設計系統值的單一資訊來源。此層包含：

  • CSS 自訂屬性（設計代幣）
  • Sass/PostCSS 變數和 mixins（如果你使用預處理器）
  • 字體聲明
  • 關鍵幀動畫
  • 媒體查詢定義

以下是典型 Helpers 檔案的樣子：

/* helpers/_tokens.css */
:root {
  /* Colors */
  --color-primary: oklch(0.65 0.24 265);
  --color-primary-light: oklch(0.78 0.18 265);
  --color-secondary: oklch(0.72 0.19 155);
  --color-text: oklch(0.25 0.02 260);
  --color-text-muted: oklch(0.55 0.02 260);
  --color-surface: oklch(0.98 0.005 260);
  --color-border: oklch(0.88 0.01 260);

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-2xl: 8rem;

  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --text-lg: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.75rem, 1.4rem + 1.75vw, 2.5rem);
  --text-2xl: clamp(2.25rem, 1.6rem + 3.25vw, 4rem);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
}

關鍵規則：Helpers 絕不輸出 CSS 選擇器。 它們只定義值。如果你使用預處理器，你的 mixins 就在這裡，但它們只在從其他層調用時才產生輸出。這使 Helpers 層在被引用之前保持零特異性和零檔案大小成本。

Utilities：單一用途的類

Utilities 層包含小型、可重用的類，它們只做一件事。如果你使用過 Tailwind，這個概念會感到熟悉 — 但在 HUG 中，你只寫你實際需要的效用。

/* utilities/_spacing.css */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

/* utilities/_text.css */
.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); }
.text-sm { font-size: var(--text-sm); }
.text-lg { font-size: var(--text-lg); }

/* utilities/_layout.css */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }

Utilities 層的關鍵規則：

  1. 每個類做一件事
  2. 類盡可能引用 Helpers 代幣
  3. Utilities 應謹慎使用 !important — 僅在你需要保證覆蓋行為時使用
  4. 不要「預防性地」建立效用。在需要時建立它們

這是 HUG 與純效用優先框架分道揚鑣的地方。你不是生成數千個類。你在維護你的團隊實際使用的類的精選集合。根據我的經驗，大多數專案最終會有 40-80 個效用類，這在你的頭腦中是可以掌握的。

Globals：元件和佈局樣式

Globals 層是你的大部分 CSS 所在的地方。元件、佈局、頁面特定的樣式、元素預設。

/* globals/_card.css */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: var(--space-lg);
  transition: box-shadow var(--duration-normal) var(--ease-out);
}

.card:hover {
  box-shadow: 0 8px 24px oklch(0 0 0 / 0.08);
}

.card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.card__body {
  color: var(--color-text-muted);
  line-height: 1.6;
}

注意 Globals 引用 Helpers 代幣。這很重要。你的元件不會硬編碼值 — 它們從設計代幣層中拉取。當你需要更新你的品牌主要顏色時，你只需在一個地方更改它。

HUG 不規定 Globals 層的命名規則。你可以使用 BEM、平面類名、任何你的團隊喜歡的東西。這種方法論是關於檔案組織和層分離，而不是類命名。

HUG vs 其他 CSS 方法論

以下是 HUG 的相應比較：

特性 HUG BEM ITCSS Tailwind CSS CUBE CSS
層/分類的數量 3 N/A（僅命名） 7 N/A（效用優先） 3（組成、效用、塊）
強制命名規則 否 是（嚴格） 否 N/A 鬆散
內建設計代幣 是（Helpers） 否 是（設定） 是（配置） 是
學習曲線 低 中等 高 中等 中等
框架不可知論 是 是 是 某種程度 是
特異性管理 基於層 平面 倒三角 效用基礎 例外基礎
最適合的團隊大小 1-15 5-50 10-50+ 1-30 1-15

HUG 最接近的親戚是由 Andy Bell 建立的 CUBE CSS。兩種方法論都使用大約三個類別，並在元件樣式中接納效用。主要區別在於哲學：CUBE CSS（組成、效用、塊、例外）強調「做瀏覽器的導師，而不是它的微經理」，更多地依賴 CSS 的級聯和繼承。HUG 更明確 — 它想要清晰的層邊界，並依賴自訂屬性作為主要協調機制。

BEM 仍然無處不在。你可以在 HUG 的 Globals 層內使用 BEM 命名。它們不是互斥的。區別在於 BEM 告訴你如何命名東西，但不告訴你如何組織你的檔案或管理設計代幣。HUG 處理架構；你選擇命名。

ITCSS 在精神上可能是最相似的 — 這完全是關於按特異性和覆蓋範圍組織 CSS。但七層很多。我見過團隊在某個東西是 ITCSS 中的「對象」還是「元件」上爭執不下。HUG 的三層消除了大部分這些灰色區域。

HUG CSS 方法論詳解：2026 年實用指南 - 架構

在實際專案中設定 HUG

以下是我在生產環境中一直在使用的檔案結構：

src/styles/
├── helpers/
│   ├── _tokens.css
│   ├── _breakpoints.css
│   ├── _animations.css
│   └── _index.css
├── utilities/
│   ├── _spacing.css
│   ├── _typography.css
│   ├── _layout.css
│   ├── _visibility.css
│   └── _index.css
├── globals/
│   ├── _reset.css
│   ├── _base.css
│   ├── _header.css
│   ├── _card.css
│   ├── _button.css
│   ├── _form.css
│   └── _index.css
└── main.css

你的 main.css 進入點按順序匯入各層：

/* main.css */
@layer helpers, globals, utilities;

@import './helpers/_index.css' layer(helpers);
@import './globals/_index.css' layer(globals);
@import './utilities/_index.css' layer(utilities);

這是關鍵：我們使用 CSS 級聯層 （@layer）。透過將層順序聲明為 helpers, globals, utilities，我們確保效用始終在特異性衝突中獲勝。.text-center 效用將覆蓋元件的 text-align: left，而無需 !important。這是 HUG 在 2026 年最大的實際優勢之一 — 級聯層現在有接近通用的瀏覽器支持，它們可以以優雅的方式解決特異性衝突。

HUG CSS 搭配現代框架

Next.js 和 React

在 Next.js 專案中，HUG 與元件作用域樣式的 CSS Modules 配合得很好。我使用的模式：Helpers 和 Utilities 是全域的（在你的佈局中匯入），而 Globals 可以在全域樣式和 CSS Modules 之間分割。

// app/layout.tsx
import '@/styles/main.css'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

// components/Card.tsx
import styles from './Card.module.css'

export function Card({ title, children }) {
  return (
    <div className={styles.card}>
      <h3 className={`${styles.title} text-lg`}>{title}</h3>
      <div className={`${styles.body} text-muted`}>{children}</div>
    </div>
  )
}

元件使用 CSS Module 類來進行結構樣式，使用 HUG 效用來進行表示調整。這種混合方法為你提供不會洩漏的作用域樣式，加上共享的效用詞彙。我們的團隊在 Social Animal 在我們的 Next.js 開發工作 中廣泛使用這種模式，它在各種複雜程度的專案中都經受住了考驗。

Astro

Astro 的作用域 <style> 區塊與 HUG 配合得很好。你的 Helpers 代幣隨處可得，因為它們定義在 :root 上，你可以全域匯入效用。

---
// src/components/Card.astro
---
<div class="card">
  <h3 class="card__title">Title</h3>
  <p class="card__body text-muted mt-sm">Content here</p>
</div>

<style>
  .card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: var(--space-lg);
  }
  .card__title {
    font-size: var(--text-lg);
    font-weight: 600;
  }
  .card__body {
    line-height: 1.6;
  }
</style>

作用域樣式引用來自 Helpers 的自訂屬性，所以即使樣式是元件作用域的，你的設計代幣也保持集中化。我們發現這種方法對於 基於 Astro 的專案 特別有效，其中效能和最小 CSS 發貨是優先事項。

高級模式和自訂屬性

內容相關代幣

一種與 HUG 配合得很好的模式是內容相關（或語義）代幣。與其直接在 Globals 中引用 --color-primary，不如建立中介代幣來描述目的：

/* helpers/_tokens.css */
:root {
  /* Primitive tokens */
  --blue-600: oklch(0.55 0.24 265);
  --blue-400: oklch(0.72 0.18 265);
  --gray-900: oklch(0.25 0.02 260);
  --gray-100: oklch(0.95 0.005 260);

  /* Semantic tokens */
  --color-action: var(--blue-600);
  --color-action-hover: var(--blue-400);
  --color-text-primary: var(--gray-900);
  --color-bg-primary: var(--gray-100);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --color-action: var(--blue-400);
    --color-action-hover: var(--blue-600);
    --color-text-primary: var(--gray-100);
    --color-bg-primary: var(--gray-900);
  }
}

你的 Globals 和 Utilities 只引用語義代幣。深色模式變得微不足道 — 你只需將語義代幣重新對映到不同的原始值。

容器查詢搭配 HUG

容器查詢在 2026 年完全受支持，它們自然地融入 HUG 的 Globals 層：

/* globals/_card.css */
.card-container {
  container-type: inline-size;
  container-name: card;
}

.card {
  padding: var(--space-md);
  display: grid;
  gap: var(--space-sm);
}

@container card (min-width: 400px) {
  .card {
    grid-template-columns: 200px 1fr;
    padding: var(--space-lg);
    gap: var(--space-md);
  }
}

容器查詢與它修改的元件一起存在於 Globals 中。間距值仍然來自 Helpers。清晰的分離。

狀態基礎效用

我開始做的一件事是在 Utilities 層中建立狀態基礎效用模式：

/* utilities/_states.css */
.hover\:scale-up:hover {
  transform: scale(1.02);
  transition: transform var(--duration-fast) var(--ease-out);
}

.focus-visible\:ring:focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: 2px;
}

.disabled\:opacity:disabled,
.disabled\:opacity[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

這借用了 Tailwind 的狀態前綴規則，但將其保持為少數幾個真正有用的模式，而不是生成所有可能的組合。

採用 HUG 時常見的錯誤

將元件樣式放在 Utilities 中。 如果你的類做了不止一件事，它就不是效用。.card-header 是 Global，而不是 Utility，即使它很小。

在 Globals 中硬編碼值。 Helpers 層的全部意義在於集中化你的設計代幣。每次你寫 padding: 16px 而不是 padding: var(--space-md) 時，你都在建立一個維護問題。

建立太多效用。 你不需要 .mt-1 到 .mt-100。從 Helpers 中的間距刻度開始，只為代幣集中存在的值建立效用。

跳過 CSS 級聯層。 沒有 @layer，你會失去 HUG 最大的好處之一：保證的特異性順序。該方法論仍然有效，但你會以舊方式與特異性作鬥爭。

將 HUG 視為宗教。 這是一個指導方針，而不是法律。如果什麼東西不完全符合三層中的一層，做出一個務實的決定並繼續前進。80/20 規則適用。

HUG CSS 不是正確選擇的時機

HUG 適用於大多數網路專案，但在某些情況下它不是理想的。

如果你使用 Tailwind CSS 並且你的團隊對它感到滿意，就沒有什麼理由轉換。Tailwind 已經從不同的角度解決了 HUG 解決的相同問題。你可以在 Tailwind 旁邊採用 HUG 的 Helpers 層（設計代幣），但 Utilities 和 Globals 層會是多餘的。

對於具有許多團隊的非常大的設計系統，你可能需要更具規範性的東西。HUG 的簡潔性對於小型到中型團隊來說是一個優勢，但在沒有額外治理的情況下可能導致大規模不一致。

如果你的專案是一個CSS-in-JS 商店使用 styled-components 或 Emotion，HUG 的檔案組織不會自然地對映。你仍然可以應用概念層（代幣定義、效用、元件樣式），但檔案結構看起來會不同。

對於無頭 CMS 專案，你正在從頭開始建立設計系統 — 我們在 無頭 CMS 開發實踐 中所做的工作 — HUG 提供了恰到好處的結構，而不會妨礙。但根據團隊規模和專案範圍，你的里程數會有所不同。

常見問題

CSS 中 HUG 代表什麼？ HUG 代表 Helpers、Utilities 和 Globals。這些是組成該方法論 CSS 架構的三層。Helpers 包含設計代幣和變數，Utilities 包含單一用途的類，Globals 包含元件和佈局樣式。

HUG CSS 比 BEM 更好嗎？ 它們解決了不同的問題，實際上可以一起使用。BEM 是一個命名規則，告訴你如何命名你的 CSS 類。HUG 是一種架構方法論，告訴你如何組織你的樣式表。你可以在 HUG 的 Globals 層中使用 BEM 命名。如果你需要結構和命名規則，組合它們效果很好。

我可以將 HUG CSS 與 Tailwind 一起使用嗎？ 你可以，但有相當大的重疊。如果你已經致力於 Tailwind，採用 HUG 的 Helpers 層進行設計代幣管理是有意義的。但 Tailwind 已經涵蓋了 Utilities 層，其元件提取模式涵蓋了 Globals 的大部分。實際上，大多數團隊選擇一種方法。

HUG CSS 需要 CSS 級聯層嗎？ 它不是嚴格要求的，但強烈建議使用 @layer。級聯層為你提供確定性特異性順序，這意味著效用將始終覆蓋元件樣式而無需 !important。@layer 的瀏覽器支持在 2026 年遠高於 95%，所以沒有理由不使用它們。

HUG CSS 如何處理深色模式？ 深色模式在 Helpers 層中使用內容相關（語義）代幣進行處理。你定義原始顏色值，然後將它們對映到 --color-text-primary 和 --color-bg-primary 這樣的語義代幣。在深色模式媒體查詢或類切換中，你將這些語義代幣重新對映到不同的原始值。你的 Utilities 和 Globals 根本不需要改變。

HUG CSS 適合大型團隊嗎？ HUG 非常適合大約 1-15 名開發者的團隊。它的簡潔性是一個優勢 — 三層很容易教授和實施。對於在同一程式碼庫上工作的多個團隊的非常大的組織，你可能想要在 HUG 之上添加額外的規則（如 BEM 命名或更嚴格的檔案命名規則）以保持一致性。

HUG CSS 和 CUBE CSS 之間的區別是什麼？ 兩種方法論都使用大約三個類別，並在元件樣式中接納效用。主要區別是哲學：CUBE CSS（組成、效用、塊、例外）強調與級聯和繼承配合，而 HUG 強調透過自訂屬性進行明確層分離。CUBE 更多地依賴瀏覽器的預設；HUG 對代幣管理更明確。

我如何將現有專案遷移到 HUG CSS？ 首先將你的設計代幣提取到 Helpers 層 — 將所有硬編碼的顏色、間距值和字體大小拉入自訂屬性。接下來，確定重複的單一用途模式並將它們移至 Utilities 檔案。其他一切都變成 Globals。你不需要一次重寫所有 CSS；逐個檔案遷移。在進行時將每層包裝在 @layer 聲明中，特異性順序將自動排序。