こんにちは！
気づけば35歳、未経験からWeb開発の世界に飛び込んだ者です。
ヘッダーの余白を少し直しただけなのに、なぜか遠く離れたフッターが崩壊する。直せば直すほど他の場所が壊れていく。「これ、CSSじゃなくてジェンガかな？」と何度も心が折れかけました。
しかし、ある本を読んでから少しずつ霧が晴れてきました
この記事では、自分でも理解できた内容をベースに、「破綻しないCSS設計の考え方」をお届けします。
参考書籍：
- 谷 拓樹『Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法』（2014）
この記事の対象者
- CSSの基本（セレクタやプロパティ）は書けるようになった方
- クラス名の付け方にいつも迷って、最終的に
box1とか付けちゃう方 - CSS設計（BEM / FLOCSS）の基礎を知りたい方
1. 目指すべき「より良いCSS」の4つのゴール
良いCSSアーキテクチャには、以下の4つの特徴があります。
- 🔮 予測しやすい
ルール通りに機能し、新しく追加したスタイルが他に悪影響（謎のレイアウト崩れ等）を与えない。 - ♻️ 再利用しやすい
抽象的に作られており、他に似たようなUIが登場した際、コードをコピペせずに再利用できる。 - 🛡 保守しやすい
新しいデザインが加わっても、既存のCSSを震える手で恐る恐る触る必要がない。 - 📈 拡張しやすい
サイトの規模が大きくなり、メンバーが増えても「ここは俺の管轄外だ」とならない。
この4つのゴールに近づくための強力なアプローチが「コンポーネント設計」です。
2. コンポーネント設計とは？
コンポーネント設計とは、UIを「独立した部品(コンポーネント)」として考えて設計する手法です。
機能や振る舞いを明確に分離し、「HTMLの構造に極力依存させずにスタイルを作る」ことが重要です。
実生活で例えるなら、「実家暮らしで親のルールに縛られている状態」から「一人暮らしで完全に自立した状態」にするイメージです。
❌ 悪い例：HTML構造に依存したCSS（実家暮らし）
親（.sidebar）や実家（ul li）に依存しているため、引っ越す（HTML構造が変わる）とスタイルがなくなる
.sidebar ul li a {
color: #333;
background-color: #eee;
}
⭕️ 良い例：コンポーネントとして独立したCSS（一人暮らし）
クラス名単体で機能するため、どこに引っ越しても（配置されても）自分のスタイルを貫ける
.c-nav-link {
color: blue;
}
3. 【重要】BEM（命名規則）をマスターする
コンポーネント設計を実現するために、現場で広く使われているクラス名のルールが「BEM（ベム）」です。
※妖怪人間ではありません。
UIを以下の3つに分類して名前をつける手法です。
| 種類 | 役割 | 繋ぎ方のルール | 例 |
|---|---|---|---|
| Block | コンポーネントの 大枠 |
なし |
.c-card.c-button
|
| Element | ブロックを 構成する要素 |
アンダースコア2つ （ __ ） |
.c-card__title |
| Modifier | ブロックや要素の バリエーション |
ハイフン2つ （ -- ） |
.c-button--danger |
最初はこの __ とか -- を見て「顔文字かな？」と思いましたが、慣れると非常に合理的です。
💻 BEMの実践コード（記事カードとボタン）
BEMの3要素（Block, Element, Modifier）がどう使われるか、実際のコードで確認しましょう。
<!-- 【Block】コンポーネントの大枠 -->
<article class="c-card">
<!-- 【Element】構成要素（__で繋ぐ） -->
<h2 class="c-card__title">CSS設計の基本</h2>
<p class="c-card__text">BEMを学ぶと世界が変わります。</p>
<!-- 【Block】独立したボタン -->
<button class="c-button">通常ボタン</button>
<!-- 【Modifier】バリエーション（--で繋ぐ） -->
<button class="c-button c-button--danger">削除ボタン</button>
</article>
/* 【Block】基準となるスタイル */
.c-button {
padding: 10px 20px;
background-color: #eee;
border-radius: 4px;
}
/* 【Modifier】変化する部分（差分）だけを書く */
.c-button--danger {
background-color: #ff4d4f; /* 赤色で上書き */
color: #fff;
}
💡 ここがポイント！
命名ルールを統一することで、「これはカードのタイトルだな」「これは危険な(赤い)ボタンだな」と、HTMLを見るだけでCSSの役割が一目で予測できるようになります。
4. FLOCSSでファイルを美しく整理する
BEMが「名前の付け方」のルールなら、FLOCSS（フロックス）は「住む場所（ファイルの分け方・配置場所）」のルールです。
FLOCSSでは、CSSを主に以下の層に分けて管理します。
-
Foundation（基盤）
ブラウザの初期スタイルをリセットするCSSや、全体の背景色など。建物の基礎工事。 -
Layout（レイアウト）
ヘッダー、フッター、サイドバーなど、ページの大枠の配置を決める要素。建物の骨組み。 -
Object（オブジェクト）
BEMを使って命名される、再利用可能なコンポーネント群（ボタン、カードなど）。建物の中の家具。
BEM（名前）とFLOCSS（住所）を組み合わせることで、「名前が被らない」「どこに何が書かれているか一瞬でわかる」CSS環境が完成します。
5. 最適化を焦らない「3回の法則」
ここまでコンポーネント化の重要性を語りましたが、最後に心得をお伝えします。
それは、
「最初からあらゆる場面で使い回せる『汎用コンポーネント』を作ろうとしないこと」です。
プログラミングには「3回繰り返したものは、パターンとして成立する（Rule of Three）」という考え方があります。
- 1回目： 初めてそのUIが登場した時は、再利用なんて考えずに書く。
- 2回目： 似たようなUIが登場しても、コンポーネント化したくなる気持ちをグッと抑える（修行）。
- 3回目： ここで初めて「これは完全に共通パターンだ！」と確信し、リファクタリング（コードの整理）を決行する。
- /* 1回目、2回目はそれぞれの場所にベタ書きする */
- .top-page-btn { ... }
- .about-page-btn { ... }
+ /* 3回目で共通化し、BEMでコンポーネントにする */
+ .c-button { ... }
まとめ
-
「予測・再利用・保守・拡張」しやすいのが「より良いCSS」
-
コンポーネントは親に依存させず「一人暮らし（独立）」させる
-
BEMは「名前の付け方」、FLOCSSは「住む場所の決め方」
-
最初から完璧を求めず、「3回の法則」でリファクタリングする
CSS設計は、知っているだけで日々のコーディングのストレスを大きく減らしてくれます。未経験からの挑戦は覚えることが多くて大変ですが、一つひとつの技術の「なぜそれが必要なのか」を理解することで確実に成長できます。
「CSSを直したら関係ないところが崩れた！」と頭を抱える夜を減らすために、ぜひ次のコーディングからBEMを取り入れてみてください！