もし数年以上CSSを書いているなら、メソドロジー戦争を経験しているはずです。BEMは機能するが見た目は悪い命名規則をくれました。OOCSSは再利用性を約束しました。SMACSSはカテゴリーを与えました。ITCSSはレイヤーをくれました。そしてTailwindのようなユーティリティファーストフレームワークが登場し、CSSアーキテクチャについて知っていることすべてを疑問視させました。

HUG CSSはより新しいメソドロジーで、2025年を通じて2026年に注目を集めています。複雑な命名規則や数十のユーティリティクラスの代わりに、HUGはあなたのスタイルをわずか3つのレイヤーに整理します：Helpers、Utilities、Globals。名前はここから来ています。革命というより、実際に機能するものの実用的な統合です。

過去1年間、クライアントプロジェクトでHUGを使用してきました。それは官僚的ではなく構造を望むチームへの私のデフォルト推奨になりました。どのように機能し、どこが優れているのか、そしてどこが不足しているのかを説明させてください。

目次

HUG CSS Methodology Explained: A Practical Guide for 2026

HUG CSSとは何か

HUG CSSは、3つの異なるレイヤーにスタイルシートを整理するための軽量なメソドロジーで、各レイヤーには明確な目的と特異性レベルがあります。名前はアクロニムです：

  • H — Helpers（デザイントークン、カスタムプロパティ、ミックスイン）
  • U — Utilities（単一目的のユーティリティクラス）
  • G — Globals（コンポーネントとレイアウトスタイル）

コアアイデア：あなたが書くすべてのCSSはこれら3つのレイヤーのうち、正確に1つに属します。何かがどこに行くのかについての曖昧性はありません。Helpersはあなたのデザインシステムの生の値を定義します。Utilitiesは再利用可能で構成可能なクラスを提供します。Globalsは他のすべてを処理します—実際のコンポーネントスタイル、ページレイアウト、要素固有のルール。

HUGを（7つのレイヤーを持つ）ITCSSと異なるものにしているのは、その意図的なシンプルさです。3つのレイヤーは初心者開発者に5分で説明するのが簡単です。コードレビューで簡単に強制できます。そして、明確に定義されているため、意外とよくスケーリングします。

HUGは2024年後半にCSSコミュニティによって正式化されました。多くの開発者が既に直感的に使用していたパターンを描いています。2025年を通じて人気が出ました。開発者が「好きなCSSを書く」と「すべてのクラスはこの47ページの命名規則に従う必要があります」の極端な間の選択肢を探していました。

3つのレイヤーの説明

Helpers：デザインシステムの基盤

Helpersレイヤーは、あなたのデザインシステムの生の構成要素を定義する場所です。あなたのデザインシステムの単一の真実の情報源と考えてください。このレイヤーには次が含まれます：

  • CSSカスタムプロパティ（デザイントークン）
  • Sass/PostCSS変数とミックスイン（プリプロセッサを使用する場合）
  • Font-face宣言
  • キーフレームアニメーション
  • メディアクエリ定義

典型的な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はセレクタを出力しません。**これらは値を定義するだけです。プリプロセッサを使用している場合、ミックスインはここに存在しますが、他のレイヤーから呼び出されるときにのみ出力を生成します。これによってHelpersレイヤーを0の特異性と0のファイルサイズコストで保つことができます。

Utilities：単一目的のクラス

Utilitiesレイヤーには、正確に1つのことを実行する小さな再利用可能なクラスが含まれます。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. 各クラスは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トークンを参照することに注意してください。これは重要です。コンポーネントは値をハードコーディングしません—デザイントークンレイヤーから値を取得します。ブランドのプライマリカラーを更新する必要がある場合は、1か所で変更します。

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によって作成されました。両方のメソドロジーはおよそ3つのカテゴリを使用し、コンポーネントスタイルと共にユーティリティを導入しています。主な違いは哲学的です：CUBE CSS（Composition、Utility、Block、Exception）は「ブラウザのメンター、マイクロマネージャーではない」ことを強調し、CSSのカスケードと継承を大きく活用しています。HUGはより明示的です—レイヤー間の明確な境界を求め、カスタムプロパティをプライマリ調整メカニズムとして活用しています。

BEMはまだ至るところにあります。HUGのGlobalsレイヤー内でBEM命名を使用できます。互いに排他的ではありません。違いはBEMは物事を命名する方法を教えていますが、ファイルの整理方法やデザイントークンの管理方法を教えていません。HUGはアーキテクチャを処理します。あなたが命名を選びます。

ITCSSはおそらく精神において最も類似しています—それはCSSを特異性と到達範囲による整理についてです。しかし7つのレイヤーはたくさんです。ITCSSで何かが「Object」か「Component」かについて同意するのに苦労してのを見たことがあります。HUGの3つのレイヤーはほとんどのグレーゾーンを排除します。

HUG CSS Methodology Explained: A Practical Guide for 2026 - architecture

実際のプロジェクトでの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年における最大の実用的利点の1つです—カスケードレイヤーはほぼ普遍的なブラウザサポートを持つようになりました。特異性の競合を優雅に解決します。

モダンフレームワークでのHUG CSS

Next.jsとReact

Next.jsプロジェクトでは、HUGはコンポーネントスコープのスタイルのためのCSSモジュールと上手く機能します。使用するパターン：HelpersとUtilitiesはグローバル（レイアウトにインポート）で、GlobalsはグローバルスタイルとCSSモジュールの間で分割できます。

// 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と上手く機能する1つのパターンはコンテキスト（またはセマンティック）トークンです。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から来ます。きれいな分離。

状態ベースのユーティリティ

私が始めたことの1つは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は小さくても、Utility以外の、Globalです。

**Globalsで値をハードコーディングする。**Helpersレイヤーのポイント全体はデザイントークンを一元化することです。padding: var(--space-md)の代わりにpadding: 16pxを書くたびに、メンテナンスの問題を作成しています。

多すぎるユーティリティを作成する。.mt-1から.mt-100までが必要ではありません。Helpersからスペーシングスケールで始まり、トークンセットに実際に存在する値に対してのみユーティリティを作成します。

CSSカスケードレイヤーをスキップする。@layerなしで、HUGの最大の利点の1つを失います：保証された特異性順序。メソドロジーはまだそれなしで機能しますが、従来の方法で特異性と戦うことになります。

**HUGを宗教として扱う。**それは法律ではなく、ガイドラインです。何かが3つのレイヤーのいずれかにきちんと適合しないなら、実用的な決定をして進みます。80/20ルールが適用されます。

HUG CSSが適切でない場合

HUGはほとんどのWebプロジェクトで上手く機能しますが、適切でない状況があります。

Tailwind CSSを使用しており、チームがそれで満足している場合、切り替える理由はほぼありません。Tailwindはすでに同じ問題を解決しています。ただ別の角度からです。HUGのHelpersレイヤー（デザイントークン）をTailwindと一緒に採用できましたが、UtilitiesとGlobalsレイヤーは冗長です。

非常に大きなデザインシステムでは、数十のチームがあり、より規定的なものが必要かもしれません。HUGのシンプルさは小〜中チームの強みですが、追加の管理がないとスケール時に矛盾につながる可能性があります。

プロジェクトがCSS-in-JSショップで、styled-componentsまたはEmotionを使用している場合、HUGのファイルベースの編成は自然にマップされません。概念的なレイヤー（トークン定義、ユーティリティ、コンポーネントスタイル）を適用できますが、ファイル構造は同じには見えません。

ヘッドレスCMSプロジェクトでは、スクラッチからデザインシステムを構築している場合—我々のヘッドレスCMS開発実務で行うような仕事—HUGは邪魔にならない十分な構造を提供します。しかしチームサイズとプロジェクト範囲に応じて、成績は異なります。

FAQ

CSSのHUGは何の略ですか？

HUGはHelpers、Utilities、Globalsの略です。これらはメソドロジーのCSSアーキテクチャを構成する3つのレイヤーです。Helpersはデザイントークンと変数を含み、Utilitiesは単一目的のクラスを含み、Globalsはコンポーネントとレイアウトスタイルを含みます。

HUG CSSはBEMより良いですか？

They solve different problems and can actually be used together. BEMは物事を命名する方法を教えているCSS命名規則です。HUGはスタイルシートを整理する方法を教えているアーキテクチャメソドロジーです。HUGのGlobalsレイヤー内でBEM命名を使用できます。構造と命名規則の両方が必要な場合、組み合わせが上手く機能します。

TailwindでHUG CSSを使用できますか？

可能ですが、かなりの重複があります。既にTailwindにコミットしている場合、デザイントークン管理のためにHUGのHelpersレイヤーを採用するのは意味があります。しかしTailwindはすでにUtilitiesレイヤーをカバーしており、そのコンポーネント抽出パターンはGlobalsが行うことの多くをカバーしています。実務では、ほとんどのチームが1つのアプローチを選びます。

HUG CSSはCSSカスケードレイヤーを必要としますか？

厳密には必要ではありませんが、@layerを使用することが強く推奨されます。カスケードレイヤーは決定論的な特異性順序を提供します。これはユーティリティが!importantを必要とさせずにコンポーネントスタイルをオーバーライドします。@layerに対するブラウザサポートは2026年に95％以上です。使用しない理由はほぼありません。

HUG CSSはダークモードをどう処理しますか？

ダークモードはHelpersレイヤーでコンテキスト（セマンティック）トークンを使用して処理されます。プリミティブ色値を定義し、それを--color-text-primaryと--color-bg-primaryのようなセマンティックトークンにマップします。ダークモードのメディアクエリまたはクラスの切り替えで、そのセマンティックトークンを異なるプリミティブ値にリマップします。あなたのUtilitiesとGlobalsはまったく変更する必要があります。

HUG CSSは大きなチームに適していますか？

HUGは約1〜15人の開発者のチームで上手く機能します。シンプルさは資産です—3つのレイヤーは教えやすく、強制しやすい。同じコードベースで複数のチームが作業している非常に大きな組織では、一貫性を保つためにHUGに追加の規約を追加したい（BEM命名やより厳格なファイル命名規則など）かもしれません。

HUG CSSとCUBE CSSの違いは何ですか？

両方のメソドロジーはおよそ3つのカテゴリを使用し、コンポーネントスタイルと共にユーティリティを導入しています。主な違いは哲学的です：CUBE CSS（Composition、Utility、Block、Exception）はカスケードと継承を使って機能することを強調しますが、HUGはカスタムプロパティを通じた明示的なレイヤー分離を強調しています。CUBEはブラウザのデフォルトにもっと寄り添い、HUGはトークン管理についてより明示的です。

既存のプロジェクトをHUG CSSに移行するにはどうしたらいいですか？

デザイントークンをHelpersレイヤーに抽出することから始めます—ハードコードされた色、スペーシング値、およびフォントサイズをカスタムプロパティに引き出します。次に、繰り返されている単一目的パターンを特定し、Utilitiesファイルに移動します。他のすべてはGlobalsになります。一度にすべてのCSSを書き直す必要はありません。ファイルごとに移行します。進むにつれて、各レイヤーを@layer宣言でラップし、特異性順序が増分的に自分自身をソートします。