CSS詳細度の泥沼から抜け出せ：BEMとフラットな設計が「強いコード」を作る理由
フロントエンドの現場で長く戦っていると、一度は必ず「CSSの修正が効かない」「予期せぬ場所でスタイルが壊れた」という悪夢に遭遇するはずだ。その原因のほとんどは、ブラウザの仕様である「詳細度（Specificity）」を軽視し、カスケードの海に溺れていることにある。
今日は、なぜBEMという少し古臭くも見える設計手法が、現代のコンポーネント指向開発においても最強の防具であり続けるのか。その本質をエンジニアの視点で深掘りしていこう。
—
1. ブラウザは「詳細度」という名のスコアで戦っている
CSSにおいて、スタイルが競合したときに勝敗を決めるのは「詳細度」だ。ブラウザのレンダリングエンジンは、CSSを読み込む際に各ルールにスコアを割り当てている。
- IDセレクタ: 1-0-0
- クラス・属性・擬似クラス: 0-1-0
- 要素（タグ）セレクタ: 0-0-1
例えば、`.card .title`（0-2-0）と、`div.card .title`（0-2-1）が競合すれば、後者が勝つ。この「スコア計算」を意識せずにCSSを書いていると、いつか必ず詳細度を上げるために `!important` という禁じ手を乱発する羽目になる。これは「設計の敗北」を意味する。
—
2. BEMは「詳細度をフラットにする」ための最適解だ
BEM（Block, Element, Modifier）の真の強みは、実は「命名が綺麗になること」ではなく、「すべてのスタイルをクラス単一（0-1-0）で定義し、詳細度をフラットに保てること」にある。
もし君が `nav ul li a` のようなセレクタを多用しているなら、今すぐやめるべきだ。これらは詳細度が積み重なり、いざ上書きしようとした時に「詳細度をさらに上げないと勝てない」という無限ループに陥る。
BEMを使えば、常に詳細度は `0-1-0` で固定される。これなら、後から書いたスタイルが必ず優先されるという直感的な挙動になり、CSSの管理が驚くほどシンプルになるんだ。
実践的なサンプルコード：BEMによるフラットな管理
/ Block: カード本体 /
.card {
padding: 16px;
border: 1px solid #ccc;
background: #fff;
}
/ Element: カード内のタイトル（親の詳細度に依存しない） /
.card__title {
font-size: 20px;
color: #333;
}
/ Modifier: 状態変化（色を変えるだけで、構造は変えない） /
.card–featured {
border-color: #ff9900;
background: #fffdf0;
}
/
ポイント:
.card–featured .card__title と書かずに、
Modifierを当てたときだけクラスを追加する運用にする。
これにより、詳細度は常に 0-1-0 で統一される。
/
—
3. なぜ `!important` を使ってはいけないのか
現場で `!important` を見かけると、僕は反射的に警告アラートが出る。`!important` はカスケードのルールを無視する「核兵器」だ。一度使えば、それを上書きするためには、さらに強い詳細度か、別の `!important` を書くしかない。
「CSSが効かないからとりあえず !important」 というのは、設計を見直すチャンスを放棄しているのと同じだ。どうしてもスタイルを上書きしたいときは、以下の手順を思い出してほしい。
1. 詳細度が負けていないか確認する（Chrome DevToolsの「Computed」タブを見るのが一番早い）。
2. HTMLの構造を見直す（セレクタのネストが深すぎないか？）。
3. BEMの命名規則に従い、クラスを付与する（Modifierを適切に使い、クラスだけで制御する）。
—
4. 現場のシニアとしてのアドバイス：CSSは「引き算」で考える
最後に、中級エンジニアから一歩上へ行くための秘訣を伝授しよう。それは、「CSSは、いかに書かないか」だ。
- 要素セレクタ（`div`, `p`）は極力使わない: スタイルが意図せず波及するリスクがある。
- 深すぎるネストは避け、クラスを一段階で適用する: `BEM` はそのための共通言語だ。
- 詳細度を競わせない: スタイルを当てる時は、常に「詳細度 0-1-0」を意識する。
もしプロジェクトにレガシーなコードが残っていて、どうしても詳細度が複雑になってしまう場合は、CSSの読み込み順を整理する（後から読み込んだものが優先される）か、いっそのことCSS ModulesやTailwind CSSのような「詳細度を強制的にフラットにする」ツールへの移行を検討するのも一つの賢い戦略だ。
CSSは泥臭い仕事だが、その設計には美学が宿る。詳細度という名の「力」をコントロールできるようになった時、君の書くコードは誰にとっても読みやすく、何より「壊れにくい」資産になるはずだ。
さあ、エディタを開いて、君のCSSのネストを整理することから始めよう。応援しているよ。
コメント