如果你写了多年 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（设计令牌、自定义属性、混入）
  • U — Utilities（单一用途的实用程序类）
  • G — Globals（组件和布局样式）

核心理念：你写的每一行 CSS 都恰好属于这三层中的一个。关于某些东西放在哪里没有歧义。Helpers 定义你的设计系统的原始值。Utilities 提供可重用的、可组合的类。Globals 处理其他所有事情——你的实际组件样式、页面布局、特定元素规则。

HUG 与 ITCSS（有七层）不同之处在于它的蓄意简洁。三层很容易在五分钟内向初级开发人员解释。很容易在代码审查中强制执行。并且由于边界清晰，可扩展性出人意料地好。

HUG 在 2024 年末由 CSS 社区正式化，借鉴了许多开发人员已经凭直觉使用的模式。随着开发人员寻求介于"随便写什么 CSS"和"每个类都必须遵循这份 47 页的命名约定"之间的替代方案，它在 2025 年获得了动力。

三层详解

Helpers：你的设计系统基础

Helpers 层是你定义设计系统原始构建块的地方。把它看作你设计价值观的单一真实来源。这一层包含：

  • CSS 自定义属性（设计令牌）
  • Sass/PostCSS 变量和混入（如果你使用预处理器）
  • Font-face 声明
  • 关键帧动画
  • 媒体查询定义

以下是一个典型的 Helpers 文件的样子：

/* helpers/_tokens.css */
:root {
  /* 颜色 */
  --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);

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

  /* 排版 */
  --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);

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

关键规则：Helpers 绝不输出 CSS 选择器。 它们只定义值。如果你使用预处理器，你的混入就在这里，但它们只在从其他层调用时才产生输出。这保持 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 与其他 CSS 方法论对比

以下是 HUG 如何堆叠的：

特性 HUG BEM ITCSS Tailwind CSS CUBE CSS
层/类别数量 3 N/A（仅命名） 7 N/A（功能优先） 3（Composition、Utility、Block）
命名约定强制 否 是（严格） 否 N/A 宽松
内置设计令牌 是（Helpers） 否 是（Settings） 是（config） 是
学习曲线 低 中 高 中 中
框架无关 是 是 是 某种程度 是
特异性管理 基于层 平坦 倒三角 实用程序基础 基于异常
最适合团队规模 1-15 5-50 10-50+ 1-30 1-15

HUG 最接近的亲戚是 CUBE CSS，由 Andy Bell 创建。两种方法论都使用大约三个类别，并欢迎实用程序与组件样式并存。主要区别在于哲学：CUBE CSS（Composition、Utility、Block、Exception）强调"成为浏览器的导师，而不是微观管理者"，大量利用 CSS 的级联和继承。HUG 更明确——它想要层之间清晰的边界，并大量使用自定义属性作为主要协调机制。

BEM 仍然无处不在。你可以在 HUG 的 Globals 层内使用 BEM 命名。它们互不排斥。区别在于 BEM 告诉你如何命名事物，但不告诉你如何组织文件或管理设计令牌。HUG 处理架构；你选择命名。

ITCSS 可能在精神上最相似——它完全是关于按特异性和范围组织 CSS。但七层太多了。我见过团队在某些东西是"Object"还是"Component"在 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 Cascade Layers（@layer）。通过声明层顺序为 helpers, globals, utilities，我们确保实用程序总是赢得特异性冲突。一个 .text-center 实用程序将在没有需要 !important 的情况下覆盖组件的 text-align: left。这是 HUG 在 2026 年最大的实际优势之一——Cascade Layers 现在拥有接近通用的浏览器支持，它们优雅地解决特异性冲突。

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 中的自定义属性，所以即使样式是组件作用域的，你的设计令牌也保持集中。我们发现这种方法特别适用于性能和最小 CSS 传输是优先事项的 Astro 项目。

高级模式和自定义属性

上下文相关的令牌

一个与 HUG 配合得很好的模式是上下文相关（或语义）令牌。你直接引用 --color-primary，而是在 Globals 中创建描述目的的中间令牌：

/* helpers/_tokens.css */
:root {
  /* 原始令牌 */
  --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);

  /* 语义令牌 */
  --color-action: var(--blue-600);
  --color-action-hover: var(--blue-400);
  --color-text-primary: var(--gray-900);
  --color-bg-primary: var(--gray-100);
}

/* 深色模式 */
@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 Cascade Layers。 没有 @layer，你会失去 HUG 最大的优势之一：有保证的特异性排序。该方法论仍然有效，但你将以老式方式与特异性作斗争。

将 HUG 视为宗教。 这是一个指南，而不是法律。如果某些东西不太适合三层之一，做一个务实的决定并继续前进。80/20 法则适用。

何时 HUG CSS 不是正确的选择

HUG 适用于大多数网络项目，但有些情况下它不是理想的。

如果你正在使用 Tailwind CSS 并且你的团队对它很满意，就没有理由切换。Tailwind 已经解决了相同的问题，只是从不同的角度。你可以将 HUG 的 Helpers 层（设计令牌）与 Tailwind 一起采用，但 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 Cascade Layers？ 它不严格需要它们，但强烈推荐使用 @layer。Cascade Layers 为你提供确定性特异性排序，这意味着实用程序将总是在不需要 !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（Composition、Utility、Block、Exception）强调与级联和继承一起工作，而 HUG 强调通过自定义属性进行显式层分离。CUBE 更多地利用浏览器的默认值；HUG 对令牌管理更明确。

我如何将现有项目迁移到 HUG CSS？ 首先将你的设计令牌提取到 Helpers 层中——将所有硬编码的颜色、间距值和字体大小提取到自定义属性。接下来，识别重复的单一用途模式并将其移动到 Utilities 文件。其他所有东西都变成 Globals。你不需要立即重写所有 CSS；逐个文件迁移。随着你进行，为每一层包装在 @layer 声明中，特异性排序会逐步自行排序。