目次
BEMとは何か？
BEM（ベム）とは、
CSSのクラス命名を分かりやすく・壊れにくくするための命名ルールです。
BEMは次の3つの要素から構成されます。
- Block
- Element
- Modifier
この頭文字を取って BEM と呼ばれています。
なぜBEMが使われるのか？
CSSを書き続けていると、次のような悩みが出てきます。
- class名を見ても役割が分からない
- CSSの影響範囲が把握できない
- 修正したら別のページが崩れた
BEMは、
「どこに・何のために使われているclassか」
を一目で分かるようにするための考え方です。
BEMの基本構造
BEMでは、次のような書き方をします。
Block__Element--Modifierそれぞれの役割を見ていきましょう。
Block（ブロック）とは？
Blockは、
それ単体で意味を持つ大きな部品です。
例：
- header
- card
- button
- nav
<div class="card"></div>Blockは、
「ページの中で独立して存在できるもの」
と考えると分かりやすいです。
Element（エレメント）とは？
Elementは、
Blockの中に属する部品です。
<div class="card">
<h2 class="card__title">タイトル</h2>
<p class="card__text">本文</p>
</div>card__title
card__textポイントは、
ElementはBlock単体では存在できないという点です。
Modifier（モディファイア）とは？
Modifierは、
見た目や状態の違いを表すためのclassです。
<button class="button button--primary">送信</button>
<button class="button button--secondary">戻る</button>button--primary
button--secondary色やサイズ、状態の違いを表現するときに使います。
BEM命名の具体例まとめ
カードUIの例
<div class="card card--featured">
<h2 class="card__title">タイトル</h2>
<p class="card__text">説明文</p>
</div>- card → Block
- card__title → Element
- card--featured → Modifier
class名を見るだけで構造が分かるのがBEMの強みです。
BEMを使うメリット
BEMを使うことで、次のメリットがあります。
- class名の役割が明確になる
- CSSの影響範囲が限定される
- スタイルの衝突が起きにくい
- チーム開発でも理解しやすい
特に、
あとから見直したときの分かりやすさは圧倒的です。
BEMでよくある間違い
ModifierをElementに付けてしまう
<!-- 悪い例 -->
<div class="card__title--large"></div>Modifierは、
BlockまたはElementに追加するclassとして使います。
正しい例
<div class="card__title card__title--large"></div>BEMは必ず守らなければいけないのか？
結論から言うと、
無理に使う必要はありません。
BEMは、
- CSSが増えてきた
- class命名で迷う
- 設計を整理したい
と感じたときに、非常に役立つ考え方です。
初心者がBEMを使うときのコツ
最初は、次のポイントだけ意識してください。
- BlockとElementを意識する
- 見た目ではなく役割で命名する
- Modifierは状態や種類に使う
完璧に書こうとせず、
考え方を取り入れることが大切です。
BEMとCSS設計の関係
BEMは、
CSS設計を助けるための命名ルールです。
- CSS設計 → 考え方
- BEM → 命名の具体ルール
という関係になります。
まとめ：BEMはclass命名の強力な味方
BEMを使うことで、
- class名に迷わなくなる
- CSSが読みやすくなる
- 修正が怖くなくなる
というメリットがあります。
最初から完璧に使う必要はありません。
まずは、
- Block
- Element
- Modifier
この3つを意識するところから始めてみてください。
CSSの理解が、一段レベルアップするはずです。