[Hugo] CSSの構造化と分割管理 (Hugo + Tailwind + カスタムCSS)

CSSが肥大化していく理由

Hugo や Tailwind CSS を使っていると、main.css がどんどん長くなっていく。
小さな修正を加えるたびに影響範囲が広がり、メンテナンスが難しくなる。
個人開発でも「見通しのよいCSS構造」は必要だ。

この記事では、CSSをモジュール化して管理する方法を紹介する。
Hugo の resources パイプラインや Tailwind の @layer 構造を活かすと、
デザインの拡張性が大きく変わる。

1. CSSの構造化 ─ ファイル分割の考え方

CSSの分割は、単なる整理ではなく責務の分離。
構造を意識して分けると、後からでも理解しやすくなる。


/assets/css/
├─ base/
│   ├─ reset.css
│   └─ typography.css
├─ layout/
│   ├─ grid.css
│   └─ header.css
├─ components/
│   ├─ button.css
│   └─ card.css
├─ theme/
│   └─ variables.css
└─ main.css

各ディレクトリが「層（レイヤー）」を表す：

層 役割
base 初期化や基本スタイル（Reset, Typography）
layout ページの骨格（Flex, Grid, Container）
components UI部品（ボタン・カードなど）
theme 色やフォントなどの共通変数

2. HugoでCSSをまとめる方法

複数ファイルを resources.Concat で結合して一括読み込みする：

{{ $styles := slice
    (resources.Get "css/base/reset.css")
    (resources.Get "css/layout/header.css")
    (resources.Get "css/components/button.css")
| resources.Concat "css/main.css" | minify | fingerprint }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}">

この方法なら、個別ファイルで管理しながらビルド時に自動結合できる。 開発時は分割、公開時は最適化──この流れが理想だ。

3. Tailwindと独自CSSを組み合わせる

Tailwindの @layer 構文を使うと、独自スタイルをTailwindの階層に統合できる。

@layer components {
  .card {
    @apply bg-white rounded-2xl p-4 shadow;
  }
}

ポイント：

  • @apply でユーティリティクラスを再利用。
  • content 設定に独自CSSのパスを入れて、purge（不要CSS削除）で除外されないようにする。

4. Sass/SCSSでさらに構造化する場合

もしSassを使うなら @use / @forward を活用する。

// main.scss
@use 'base';
@use 'layout';
@use 'components/button';

variables.scss にテーマ定義を置けば、デザイン変更時に修正箇所を最小化できる。

5. 命名とコメントでメンテナンス性を上げる

CSSにはコメントを「章見出し」として残すと読みやすい。

/* ===== HEADER ===== */
/* @deprecated 旧デザイン用クラス */

命名規則は BEM でも自作でもいい。
「どの層に属しているか」が一目で分かるようにするのが重要。

6. 結語 ─ CSSを“山小屋”のように整える

構造を意識したCSSは、機能を増やしても崩れない。
部屋（ファイル）ごとに役割を与え、生活しやすい設計にする。
Hugoのビルド構成と組み合わせれば、1人開発でも快適な「静的サイトの住環境」が作れる。