【完全保存版】BEMとは？CSSクラス命名ルールを初心者向けに徹底解説｜具体例で理解するBEM設計

BEMとは何か？まず一文で

BEMとは、CSSのクラス名を「役割ベース」で整理し、スタイルの衝突や崩れを防ぐための命名ルールです。

見た目ではなく「部品としての意味」でクラスを付ける。
これがBEMの核心です。

なぜBEMが必要になるのか

CSSを書き始めたばかりの頃は、こんな感じになりがちです。

.title { ... }
.box { ... }
.red { ... }
.big { ... }

最初は動きます。

でもページが増えると、こうなります。

• 同じ.titleがあちこちにある
• どの.boxなのか分からない
• 修正したら別ページが崩れた

私も過去に、共通クラスを軽い気持ちで直して、
トップページのレイアウトが総崩れになったことがあります。冷や汗ものです。

規模が大きくなるほど、命名ルールが必要になります。

BEMの基本構造

BEMは3つの概念で構成されます。

Block__Element--Modifier

• Block（ブロック）
• Element（エレメント）
• Modifier（モディファイア）

順番に見ていきます。

Blockとは？

それ単体で意味を持つ部品です。

例：

• header
• card
• button
• nav

<div class="card"></div>

Blockは「再利用できるコンポーネント」と考えると分かりやすいです。

Elementとは？

Blockの内部にある構成パーツです。

<div class="card">
  <h2 class="card__title">タイトル</h2>
  <p class="card__text">本文</p>
</div>

• card → Block
• card__title → Element
• card__text → Element

Elementは、Blockの外では存在しません。

Modifierとは？

状態やバリエーションを表すクラスです。

<button class="button button--primary">送信</button>
<button class="button button--secondary">戻る</button>

• button → Block
• button--primary → Modifier

色・サイズ・アクティブ状態などに使います。

なぜこの形にするのか（仕組みの話）

BEMは「影響範囲を限定する」ための設計です。

例えば、

.card__title {
  font-size: 20px;
}

このクラスは、cardの中のtitleにしか使われないという前提で書けます。

.titleのような曖昧な名前だと、どこに影響するか分かりません。

名前に構造を持たせる。
それがBEMの本質です。

具体例：カードUIで理解する

<div class="card card--featured">
  <h2 class="card__title">おすすめ商品</h2>
  <p class="card__text">説明文が入ります</p>
  <a href="#" class="card__button">詳しく見る</a>
</div>

対応するCSS例：

.card {
  border: 1px solid #ccc;
  padding: 16px;
}

.card--featured {
  border-color: red;
}

.card__title {
  font-size: 18px;
}

.card__button {
  display: inline-block;
}

クラス名を見るだけで構造が分かります。

よくある失敗①：Elementを独立させる

<div class="card__title"></div>

これを単体で使うのはNGです。

card__titleはcardの一部だからです。

よくある失敗②：Modifierを単独で使う

<div class="button--primary"></div>

これも危険。

正しくは：

<div class="button button--primary"></div>

Modifierは追加クラスです。

DevToolsでBEMを確認する方法

BEM設計が守られているか確認する手順：

1. 右クリック → 検証
2. クラス名を見る
3. Blockごとにまとまっているか確認

クラス名が散らかっていると、設計が崩れているサインです。

BEMとスマホ崩れの関係

命名が曖昧だと、

• スマホ用メディアクエリが当たりすぎる
• 別ページに影響する
• 横スクロール問題が発生する

BEMなら、.card単位でスタイルを切り分けられます。

影響範囲が読める。
これが実務ではかなり大きいです。

BEMを使うメリット

• クラス名で構造が分かる
• CSSの衝突が減る
• 修正範囲が明確になる
• チーム開発で混乱しにくい

特に数ヶ月後に見返したとき、
理解の速さが全然違います。

BEMは必須か？

絶対ではありません。

小規模なページなら、シンプルな命名でも問題ありません。

ただ、

• コンポーネントが増えてきた
• 再利用が多い
• クラスがカオスになってきた

こう感じたら導入タイミングです。

初心者がBEMを取り入れるコツ

最初から完璧にやろうとしなくていいです。

まずは：

• 部品単位でBlockを作る
• その中のパーツを__で分ける
• 状態は--で追加する

これだけで十分です。

チェックリスト

✔ Block単位で設計しているか
✔ ElementがBlockの外で使われていないか
✔ Modifierが単独になっていないか
✔ クラス名で役割が分かるか
✔ DevToolsで構造確認したか

まとめ：BEMは壊れにくいCSSの土台

BEMは難しい理論ではありません。

「名前に構造を持たせる」

これだけです。

Block
Element
Modifier

この3つを意識するだけで、
CSSの管理が驚くほど楽になります。

クラス名に迷ったら、
まずは部品として考えるところから始めてみてください。