流用可能な標準クラス命名一覧（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しない
クラスは意味で付ける