CSSを書いていると、こんなクラス名を見かけることがあります。

<div class="card">
  <h2 class="card__title">タイトル</h2>
  <p class="card__text">テキスト</p>
  <button class="card__button card__button--primary">
    ボタン
  </button>
</div>

これは**BEM（ベム）**と呼ばれるCSSの命名規則です。

今回は、BEMの基本だけを簡単に紹介します。

BEMとは？

BEMは、CSSのクラス名を分かりやすくするための命名規則です。

BEMは、

Block / Element / Modifier

の頭文字から名前が付けられています。

それぞれの意味は次の通りです。

名前	意味
Block	独立した部品
Element	Blockを構成する要素
Modifier	BlockやElementの状態・バリエーション

この3つを組み合わせてクラス名を作ります。

Blockとは？

Blockは、ページの中で独立した部品です。

例えばカードなら、

<div class="card">

のcardがBlockです。

他にも、

header
button
nav
form
menu

などがBlockになります。

Elementとは？

Elementは、Blockを構成するパーツです。

例えばカードの中にタイトルと説明文がある場合、

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

cardがBlockで、

card__title
card__text

がElementです。

Elementは、Blockと__でつなぎます。

Block__Element

という形です。

Modifierとは？

Modifierは、色や状態などのバリエーションを表します。

例えば通常のボタンと、強調したボタンがあるとします。

<button class="button">通常</button>

<button class="button button--primary">強調</button>

buttonがBlockで、

button--primary

がModifierです。

Modifierは--でつなぎます。

Block--Modifier

という形です。

BEMを使うと何が嬉しい？

一番のメリットは、クラス名を見ただけで、その要素が何なのか分かりやすくなることです。

例えば、

<h2 class="title">

だけだと、このtitleがどこのタイトルなのか分かりません。

一方、

<h2 class="card__title">

なら、

「cardの中にあるtitleなんだな」

とクラス名だけで判断できます。

CSSも、

.card__title {
  font-size: 24px;
}

のように書けるため、他のtitleと名前がぶつかりにくくなります。

まとめ

BEMは、CSSのクラス名を分かりやすくするための命名規則です。

覚えておきたいのは、

• Block → 部品そのもの
• Element → 部品を構成する要素
• Modifier → 状態やバリエーション

最初は__や--が少し分かりにくいですが、慣れるとHTMLを見ただけで「これは何の要素なのか」が分かりやすくなります。

CSSのクラス名をどう付けるか迷っているなら、BEMを試してみるのもおすすめです。