CSSの世界へようこそ！
最初は「あれ？色が反映されない！」「さっき書いたコードが別の場所で悪さしてる！」なんて経験、誰しも一度は通る道です。大丈夫、それはあなたがCSSの「カスケード（滝のように流れる順序）」という性質と戦っている証拠。今日は、CSSを「カオスな泥沼」から「秩序ある美しい庭」に変えるための魔法、BEMについてお話ししますね。
—
CSSの「詳細度」って、実は「権力争い」なんです
CSSを書いていると、なぜか自分の書いたスタイルが効かなくて、慌てて `!important` をつけてしまう……。これ、CSS初学者が一番陥りやすい「負のループ」です。
なぜ効かないのか。それはCSSには「詳細度（Specificity）」という、いわば「どれだけ詳しく書いているか」のランキングがあるからです。
- タグ名（`div`など）: 平民。弱いです。
- クラス名（`.card`など）: 貴族。そこそこ強いです。
- ID名（`#header`など）: 王族。めちゃくちゃ強いです。
- `!important`: 独裁者。議論の余地なくすべてを上書きします。
この「権力争い」が複雑になると、あとから修正するたびに「あっちを直せばこっちが崩れる」という地獄が始まります。これを解決するために、私たちは「詳細度をフラットにする」という知恵を使います。
—
BEM：名前だけで全てを解決する「整理術」
そこで登場するのが BEM（ベム） です。
これは、ブロック（Block）、要素（Element）、修飾子（Modifier）の頭文字をとった命名規則のこと。
例えば「カード」という部品を作るなら、こう考えます。
- Block（塊）: `card` （カード全体）
- Element（要素）: `card__title` （カードの中のタイトル）
- Modifier（状態）: `card–featured` （強調された特別なカード）
なぜこれが最強なのか？
BEMの最大の特徴は、「すべてのスタイルを『クラス名ひとつ』で完結させること」です。
/ ❌ 悪い例：詳細度がバラバラでカオス /
div#main .card .title { color: red; }
/ ✅ BEMの例：詳細度が常に一定で、どこからでも同じ強さで触れる /
.card__title {
color: #333;
font-size: 16px;
}
これなら、どのスタイルも「クラス名1つ分の強さ」しか持たないので、CSSの順序や権力争いに頭を悩ませる必要がなくなります。まるで、整理整頓されたクローゼットのように、服（スタイル）がどこにあるか一目でわかるようになるんです。
—
実践！BEMで書く「お買い物のボタン」
では、実際にコードを見てみましょう。例えば「お買い物かごに入れるボタン」を作るとします。
/ 1. 基本となるボタン（Block） /
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #ccc;
border-radius: 4px;
}
/ 2. ボタンの中のアイコン（Element） /
.btn__icon {
margin-right: 5px;
}
/ 3. 「購入ボタン」という状態変化（Modifier） /
/ 他のボタンに影響を与えずに、色だけ変えることができます /
.btn–buy {
background-color: #ff6600;
color: #fff;
}
HTMLでの使い方はこうです
見てください、この美しさ！
`btn` という共通の土台がありつつ、`btn–buy` という「追加の機能」を足すだけで、CSSの競合を気にせず自由にカスタマイズできていますよね。
—
最後に：完璧を目指さなくていいんです
BEMをはじめとする設計手法は、あくまで「開発者が迷わないためのガイドライン」です。最初から完璧な名前をつけようとして悩みすぎる必要はありません。
大切なのは、「あ、このスタイルはあの部品の一部なんだな」と、半年後の自分が読んでもすぐわかる名前をつけることです。
CSSは、あなたの書いたコードがそのまま画面に映し出される、とても素直で楽しい言語です。詳細度という「権力」の呪縛から解き放たれて、BEMという「整理術」を味方につければ、きっともっとCSSが好きになるはず。
迷ったら、またいつでもここへ戻ってきてくださいね。応援しています！
コメント