流用可能な標準クラス命名一覧（BEM統合版）
※BEMは、CSSのクラス名を設計するための命名規則です。
BEMは「Block（ブロック）」「Element（要素）」「Modifier（修飾子）」の3つの要素で構成されており、これらの要素を組み合わせてクラス名を命名します。
BEMは、CSSの可読性を高め、再利用性や保守性を向上させることを目的としています。
ただし、BEMを守ることが目的ではありません。
「親に依存するかどうか」「差分かどうか」
を考えて命名すればOKです。
まずBEMの前提
Block（ブロック）：
独立したコンポーネントを表します。再利用可能で、他のコンポーネントと独立していることが特徴です。例としては、header、menu、buttonなど、ページ内で独立して存在する要素が該当します。Blockは、そのコンポーネント全体を包括する役割を果たします。
Element（要素）：
Blockを構成する部分要素を表します。ElementはBlockの中に存在し、Blockに依存します。例えば、button Block内のbutton__text（ボタン内のテキスト）やbutton__icon（ボタン内のアイコン）などがElementの例です。Elementは、2つのアンダースコア（__） を使ってBlockと区別します。
Modifier（修飾子）：
BlockやElementの状態やバリエーションを表します。例えば、button Blockのbutton--active（アクティブな状態のボタン）やbutton--primary（プライマリボタン）などがModifierの例です。Modifierは、2つのハイフン（--） を使ってBlockまたはElementと区別します。
命名構造
Block
Block__Element
Block--Modifier
Block__Element--Modifier
原則
-
Blockは独立できる -
__Elementは Block に依存 -
--Modifierは差分・状態 - ❌
Block--a--bの連結はしない - ❌
_01など番号命名はしない
① レイアウト系（Block中心）
| 役割 | クラス名 | BEM位置 | 説明 |
|---|---|---|---|
| ページ全体 | .page |
Block | 1ページのラッパー |
| メイン | .main |
Block | mainと併用 |
| セクション | .section |
Block | 意味ごとの塊 |
| セクション内枠 | .section__inner |
Element | 横幅制御 |
| セクション差分 | .section--services |
Modifier | 種類違い |
| ヘッダー | .header |
Block | ページ上部 |
| フッター | .footer |
Block | ページ下部 |
| サイドバー | .sidebar |
Block | 補助領域 |
② 一覧・並び（集合Block）
考え方
「並び」は基本的に Blockとして独立 させる。
| 役割 | クラス名 | BEM位置 | 説明 |
|---|---|---|---|
| 汎用一覧 | .list |
Block | 汎用集合 |
| 横並び | .list--row |
Modifier | 横方向 |
| グリッド | .grid |
Block | Grid前提 |
| カード一覧 | .card-list |
Block | cardの集合 |
| 一覧要素 | .list__item |
Element | listに依存 |
判断基準
- 親がなくても成立する → Block
- 親がないと意味がない →
__
③ 部品（コンポーネントBlock）
| 役割 | クラス名 | BEM位置 | 説明 |
|---|---|---|---|
| カード | .card |
Block | 独立情報 |
| タイトル | .card__title |
Element | card依存 |
| 本文 | .card__text |
Element | card依存 |
| サムネ | .card__thumb |
Element | 画像 |
| 強調カード | .card--featured |
Modifier | 差分 |
| ボタン | .btn |
Block | 操作UI |
| 主ボタン | .btn--primary |
Modifier | 差分 |
| アイコン | .icon |
Block | 装飾要素 |
④ テキスト系（Blockとして扱う）
※ 見出しタグとは別管理
| 役割 | クラス名 | BEM位置 | 説明 |
|---|---|---|---|
| 見出し装飾 | .heading |
Block | 見た目用 |
| 大見出し | .heading--lg |
Modifier | サイズ違い |
| 本文 | .text |
Block | 通常文 |
| 小さめ | .text--small |
Modifier | 差分 |
| 強調 | .text--accent |
Modifier | 色など |
⑤ ユーティリティ（最小限）
ユーティリティは BEM外枠 として扱う。
| 役割 | クラス名 | 説明 |
|---|---|---|
| 下余白 | .u-mb-m |
margin-bottom |
| 上余白 | .u-mt-l |
margin-top |
| 中央寄せ | .u-center |
text-align |
| 非表示 | .is-hidden |
状態 |
| 表示中 | .is-active |
状態 |
※ u- や is- を付けると責務が明確
⑥ Modifier設計ルール
OKパターン
<button class="btn btn--primary">
<div class="card card--featured">
<section class="section section--services">
NGパターン
<section class="section--services--tv"> ❌
<div class="card__title--red--big"> ❌
<div class="card_01"> ❌
⑦ BlockとElementの見極め基準
Q1. 親がなくても意味が通る？
YES → Block
Q2. 親がないと成立しない？
YES → __Element
Q3. 同じ構造で見た目だけ違う？
YES → --Modifier
⑧ 命名アンチパターン（BEM視点）
| NG例 | なぜダメか |
|---|---|
.red |
見た目依存 |
.big-text |
サイズ依存 |
.box1 |
意味なし |
.section__inner_01 |
番号命名 |
.section--a--b |
連結modifier |
⑨ 実務設計のルール
- Blockは単体で成立する
- Elementは親依存
- Modifierは差分のみ
- 番号で区別しない
- 連結modifierしない
- クラスは意味で付ける