「名前を付けるだけで変わる」BEM命名規則で保守性を爆上げする方法｜現場で使える実践テクニック

こんにちは！

今日は「BEM命名規則で保守性を爆上げする実践的な使い方」について解説します。

3ヶ月後のCSSの地獄 ─ 僕の失敗談

僕も入社2年目の頃、めっちゃ痛い経験をしました。
プロジェクトの途中から引き継いだCSSを見たときのことです。
クラス名が.header-top、.header-title、.header-title-innerみたいにバラバラで、どれを変更したら何が壊れるのか、ほんまに分からん状態でした。

「あ、このクラス名を修正したら色が変わるんやな」と思って触ったら、意図しない場所まで影響が出ちゃいました。
その時に気づいたんです。「名前の付け方が適当やと、後々めっちゃ大変になる」って。
それ以来、BEM命名規則をめっちゃ大事にしてます。

BEM命名規則とは？ ─ Block、Element、Modifierの関係

BEMは「Block」「Element」「Modifier」の3つの階層で構成されるシンプルな命名ルールです。
各要素を明確に分けることで、CSSの依存関係が一目瞭然になります。

Block（ブロック）
独立して成り立つコンポーネント単位です。
例えば.card、.header、.buttonみたいな感じです。
この段階では親要素の影響を受けず、単体で再利用できることを意識します。

Element（要素）
BlockAの中身の部品を指します。
名前はBlock__Elementという形で、ダブルアンダースコア（__）で繋ぎます。
例えば.card__title、.card__body、.header__logoといった具合です。
大切なのは、Elementは単体では成り立たず、必ずBlockの中にあるということです。

Modifier（修飾子）
BlockやElementの状態やバリエーションを表します。
名前はBlock--modifierやBlock__Element--modifierという形で、ダブルハイフン（--）で繋ぎます。
例えば.button--primary、.card__title--largeみたいな感じです。
「このボタンは目立たせたいバージョン」「このカードタイトルは大きいサイズ」という意図がハッキリしますよね。

現場で使うBEMの実践テクニック

具体例：カードコンポーネントで考える

よくあるカード要素を作ってみます。
HTMLはこんな感じです。

<div class="card card--featured">
<img class="card__image" src="photo.jpg" alt="">
<h3 class="card__title card__title--large">タイトル</h3>
<p class="card__description">説明文</p>
<a class="card__link">詳細を見る</a>
</div>

CSSはこんな感じで書きます。

.card { padding: 20px; border: 1px solid #ddd; }
.card--featured { background: #f0f0f0; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.card__image { width: 100%; height: auto; }
.card__title { font-size: 1.2em; margin: 10px 0; }
.card__title--large { font-size: 1.8em; }

ここで大切なのは「階層が明確」という点です。
見ただけで「このスタイルはカード全体に関係する」「この変更はカードのタイトル部分だけ」って判断できるんです。

複数の階層を避けるコツ

現場でよく見るのは、.card__body__title__textみたいに、階層がめっちゃ深くなっちゃうケースです。
BEMのルールでは、Elementの階層は1段階までが目安です。
もし深くなってきたら、それは別のBlockとして分離した方がいいサインですよ。

よくある勘違いと対処法

勘違い1：「Modifierだけで状態管理する」
ホバー状態や活動状態を全部Modifierで表現しようとする人が多いです。
実際には、CSSの:hoverや:active疑似クラスを使った方が効率的な場合も多いんです。
「Modifierは構造的なバリエーション」「疑似クラスは一時的な状態」くらいの感覚で大丈夫です。

勘違い2：「すべてをBlockにしてしまう」
最初の頃、僕もやってましたが、細かい要素まで全部.blockという感じにしちゃうと、結局ごちゃごちゃになります。
「このコンポーネントは他の場所でも独立して使える？」で判断するといいですよ。

勘違い3：「ネストの中でBEMを忘れる」
JavaScriptフレームワーク（React、Vue等）を使ってると、コンポーネント構造に頼りすぎて、CSSの命名規則が曖昧になることもあります。
フレームワークを使っても、BEMの思想は変わりません。
「どのクラスがどの範囲に影響するのか」を明確にすることが大事なんです。

まとめ

BEM命名規則は、最初は「ちょっと名前が長くなるなぁ」と感じるかもしれません。
でも3ヶ月後、半年後にコードを修正するときに、その価値がめっちゃ分かります。
クラス名を見ただけで「このスタイルはどの範囲に影響するのか」が分かるのって、ほんま便利やん。

大事なのは「完璧に守る」じゃなくて、チーム全体で「同じルールで考える」ってことです。
保守性が上がれば、プロジェクト全体の開発速度も上がります。
ぜひ現場で試してみてくださいね！