Springfalfal

【CSS設計】BEMを使って誰が見ても理解できるCSSを書く

設計イラスト

BEM（ベム）とは、CSS/SCSSのクラス名をつける際の世界標準的な命名ルールのひとつです。

Block（ブロック）

Element（エレメント）

Modifier（モディファイア）

という3つの概念の頭文字を取っており、

大規模なWebサイトや、WordPressテーマ開発などの

長期的な運用が必要なプロジェクトで圧倒的な支持を得ています。

BEMを導入することで、

「どのデザインが、どのパーツと紐づいているのか」

が誰の目にも一発で分かるようになります。

1. BEMを構成する3つの概念

BEMでは、Webサイトのパーツを以下の3つに分解して考えます。

🟩 Block（ブロック）

  • 意味: 独立して存在できる、再利用可能なコンポーネント（塊）。
  • 例: ヘッダー（header）、カード（card）、ボタン（btn）、ナビゲーション（nav）など。
  • 書き方: 単一の単語、またはハイフン繋ぎ（例: .card, .main-visual）

🟧 Element（エレメント）

  • 意味: Blockを構成する、内部の細かい部品（Blockの外では単体で使えないもの）。
  • 例: カードの中の「画像」「タイトル」「テキスト」など。
  • 書き方: Block名の後ろに アンダースコア2つ（ __ ） で繋ぐ。
  • コード例: .card__img, .card__title, .card__text

🟨 Modifier（モディファイア）

  • 意味: BlockやElementの「見た目（色・サイズ）」や「状態（アクティブ・非アクティブ）」のバリエーション。
  • 例: 「赤いボタン」「大きいカード」「現在地（カレント）のメニュー」など。
  • 書き方: 元のクラス名の後ろに ハイフン2つ（ -- ） で繋ぐ。
  • コード例: .card--red（赤いカード）, .nav__item--active（アクティブ状態のメニュー項目）

2. 具体的なコード例

例えば、よくある「記事一覧のカード形式のレイアウト」をBEMでマークアップすると、以下のようになります。

<!-- Block: カード全体の塊 -->
<div class="photo-card">
  
  <!-- Element: カードの中の画像 -->
  <img src="thumb.jpg" alt="" class="photo-card__img">
  
  <!-- Element: カードの中のコンテンツエリア -->
  <div class="photo-card__body">
    <!-- Element: タイトル -->
    <h3 class="photo-card__title">新着記事のタイトル</h3>
    
    <!-- Element + Modifier: 通常のボタンに「注目（featured）」というバリエーションを付与 -->
    <a href="#" class="photo-card__btn photo-card__btn--featured">詳しく見る</a>
  </div>

</div>

このように、全ての要素にクラス名をつけるのがBEMの大前提です。

3. なぜBEMを使うのか？（3つの絶大なメリット）

① クラス名が絶対に衝突（バッティング）しない

BEMは必ずベースとなるBlock名（例: .photo-card）から名前が始まるため、

他のパーツのスタイル（例: 他の場所の .title や .btn）と干渉して

デザインが崩れるというトラブルが一切起きなくなります。

② HTMLの構造とCSS/SCSSが完全に一致する

クラス名を見ただけで、HTMLのどの位置にあるパーツかが瞬時にイメージできるため、

修正作業やコードレビューのスピードが爆発的に向上します。

特にSCSSの「&（アンパサンド）」を用いたネスト（入れ子）構造と非常に相性が良いです。

【SCSSでの記述例】

.photo-card {
  background-color: #fff;
  
  &__img {
    width: 100%;
  }
  
  &__title {
    font-size: 18px;
  }
  
  &__btn {
    display: inline-block;
    
    // Modifier（バリエーション）
    &--featured {
      background-color: #ff0000; // 目立たせるために赤にする
    }
  }
}

③ 他人が書いたコードでもメンテナンスしやすい

複数人で開発する場合や、過去に自分が作ったWordPressテーマを数ヶ月後に改修する場合でも、ルールがカチッと決まっているため迷子になりません。

4. よくある間違えやすい注意点

❌ 孫要素を作ってはいけない（マルチネストの禁止）

「Blockの中にElementがあり、さらにその中にElementがある」という構造のとき、以下のように名前を深く繋げてはいけません。

  • NG: .card__body__title （アンダースコアが2回以上出てきている）
  • OK: .card__title

BEMルールでは、HTMLの階層がどれだけ深くなろうとも、Elementは常にBlockの直属の部下として扱います。

❌ Modifier単体でクラスを当ててはいけない

Modifierはあくまで「変化（差分）」だけを定義するものです。HTMLに記述する際は、必ずベースとなるクラス（通常のパーツ）とセットで記述します。

  • NG: <a class="photo-card__btn--featured"></a>
  • OK: <a class="photo-card__btn photo-card__btn--featured"></a>

5. まとめ

これらのことを意識するだけで、後からスタイルを修正したい時に

「この部分のコードどこに書いてあるんだ？」

「思ってもいないところのスタイルまで変わってしまった」

といったことがなくなります。

逆にスタイルを変更したい際にすぐにコードに辿り着くため、運営がとても楽になります。

ぜひ、BEMをマスターしましょう。

今回でBEMの基本を学習できたと思います。

次は、

BEMを用いたフォルダ構成についても解説していますので、そちらもチェックしてみてください。

学習記録一覧へ

Planning

関連記事