BEM記法とは、CSSのクラス設計手法の一つで、「Block・Element・Modifier」の頭文字を取ったものです。
主に、スタイルの再利用性や保守性を高めることを目的として使われます。
CSSが大規模になると、「どのスタイルがどこに影響しているのか分からない」「クラス名が曖昧で管理できない」といった問題が起きやすくなります。
BEM記法は、そういった問題を構造的に解決するためのルールです。
BEMの基本構造
BEMは以下の3つの要素で構成されます。
Block（ブロック）
独立したコンポーネントの単位です。
それ単体で意味を持つパーツを指します。
例：header、card、button など
Element（エレメント）
Blockの中にある構成要素です。
単体では意味を持たず、必ずBlockに属します。
「Block名__Element名」という形で表現します。
例：
card__title
card__image
card__text
Modifier（モディファイア）
BlockやElementの見た目や状態の違いを表します。
「Block名--Modifier名」または「Element名--Modifier名」という形で表現します。
例：
button--primary
button--large
card__title--highlight
なぜBEM記法が重要なのか
BEM記法の本質は「クラス名を見れば構造が分かる」ことにあります。
例えば、
「card__title--large」というクラスを見ただけで、
・cardというコンポーネントの中の
・titleという要素で
・largeという状態である
ということが一瞬で理解できます。
これにより、以下のメリットがあります。
1. CSSの衝突を防げる
クラス名が明確に分かれるため、意図しないスタイルの上書きが起きにくくなります。
2. 保守性が上がる
誰が見ても構造が理解できるため、後から修正しやすくなります。
3. 再利用しやすい
Block単位で設計するため、他のページやプロジェクトでも流用しやすくなります。
よくある間違い
BEMを使っているつもりでも、実際にはルールが崩れているケースが多いです。
例えば、
・Elementを深くネストしすぎる
・Blockの役割が曖昧
・Modifierが状態ではなく別物になっている
こういった状態になると、逆に複雑になります。
BEMは「見た目」ではなく「設計思想」が重要です。
BEMを使うときの考え方
重要なのは、クラス名を付ける前に「これは何の役割か？」を考えることです。
・これは独立したパーツか → Block
・Blockの中の一部か → Element
・状態の違いか → Modifier
この3つを意識するだけで、設計の精度が一気に上がります。
まとめ
BEM記法は単なる命名ルールではなく、CSS設計の考え方そのものです。
なんとなくクラス名を付けるのではなく、構造と役割を意識して命名することで、
コードの可読性・保守性・再利用性が大きく向上します。
最初は少し面倒に感じるかもしれませんが、
プロジェクトが大きくなるほど、その価値は確実に実感できます。
「あとから楽をするための設計」として、ぜひ取り入れてみてください。
