お問い合わせ
お問い合わせ
ホーム > CSS > BEMとは？CSS設計でよく使われる命名規則を解説

BEMとは？CSS設計でよく使われる命名規則を解説

CSS
BEMの考え方を表現した再利用可能なUIコンポーネントのイメージ
再利用可能なUIパーツとその関係性を通して、BEMによる整理されたCSS設計を表現したアイキャッチ画像。

CSSを書いていると、「クラス名が増えて管理しづらい」「修正したら別の箇所まで崩れた」といった問題に直面することがあります。

特にWebサイトの規模が大きくなるほど、CSSの保守性は重要になります。

そこで多くの現場で採用されているのがBEM（Block Element Modifier）という命名規則です。

BEMを理解すると、クラス名を見ただけで役割が分かるようになり、チーム開発や長期運用でも管理しやすいCSSを書くことができます。

この記事では、BEMの基本から実践的な使い方まで詳しく解説します。

BEMとは

BEM（ベム）とは、CSSのクラス名を統一的なルールで命名するための設計手法です。

BEMは以下の3つの要素で構成されています。

  • Block（ブロック）
  • Element（要素）
  • Modifier（修飾子）

この3つを組み合わせることで、クラス名だけで構造や役割を明確に表現できます。

BEMが生まれた背景

CSSにはクラス名の付け方に決まりがありません。

そのため、開発が進むにつれて以下のような問題が発生しやすくなります。

  • class名の意味が分からなくなる
  • 同じ名前を別用途で使ってしまう
  • 修正時に他の箇所へ影響が出る
  • チームメンバーごとに命名ルールが異なる

BEMはこうした問題を解決するために考案された命名規則です。

BEMの基本構造

BEMでは以下のような記法を使用します。

<div class="card">
  <h2 class="card__title">タイトル</h2>
  <p class="card__text">説明文です。</p>
</div>

クラス名の意味は次の通りです。

クラス名役割
cardBlock
card__titleElement
card__textElement

このように、どの要素がどのブロックに属しているのかが明確になります。

Blockとは

Blockは独立したコンポーネントです。

例えば以下のようなものがBlockになります。

  • header
  • footer
  • card
  • button
  • menu
  • form

例を見てみましょう。

<div class="card">
  ...
</div>

このcardがBlockです。

Blockは単体でも意味を持つ部品として扱います。

Elementとは

ElementはBlockの内部に存在する要素です。

BEMではアンダースコア2つ（__）を使います。

<div class="card">
  <h2 class="card__title">タイトル</h2>
  <p class="card__text">本文</p>
</div>

この場合、

  • card → Block
  • card__title → Element
  • card__text → Element

となります。

Element単体では存在せず、必ずBlockに属します。

Modifierとは

Modifierは見た目や状態の違いを表します。

ハイフン2つ（–）を使用します。

<button class="button button--primary">
  送信
</button>

例えば以下のような違いを表現できます。

  • ボタンの色
  • サイズ
  • 状態
  • レイアウトの違い

CSSは次のようになります。

.button {
  padding: 12px 24px;
  border: none;
}

.button--primary {
  background: blue;
  color: white;
}

BEMの命名ルールまとめ

基本形は次の通りです。

.block
.block__element
.block--modifier
.block__element--modifier

例：

<div class="card card--featured">
  <h2 class="card__title">タイトル</h2>
  <p class="card__text card__text--large">
    本文
  </p>
</div>

それぞれの意味は以下の通りです。

クラス名意味
cardBlock
card–featured修飾されたBlock
card__titleElement
card__text–large修飾されたElement

BEMを使うメリット

クラス名を見ただけで構造が分かる

例えば以下のクラス名を見てみます。

card__title

この名前を見るだけで、

  • cardの中の
  • title要素

であることが分かります。

CSSの競合が減る

一般的な命名では次のような衝突が起こりがちです。

<div class="title">

別の場所でもtitleを使う可能性があります。

BEMなら、

card__title
news__title
profile__title

のように役割が明確になります。

保守性が高い

修正対象が分かりやすくなるため、後からコードを見返しても理解しやすくなります。

長期間運用するサイトでは大きなメリットになります。

チーム開発に向いている

複数人で開発する場合でも、命名ルールが統一されます。

その結果、

  • コードレビューしやすい
  • 修正しやすい
  • 引き継ぎしやすい

という利点があります。

BEMの実践例

ブログカードを作る例を見てみましょう。

HTML

<article class="blog-card">
  <img
    src="image.jpg"
    alt=""
    class="blog-card__image"
  >

  <div class="blog-card__body">
    <h2 class="blog-card__title">
      記事タイトル
    </h2>

    <p class="blog-card__text">
      記事概要です。
    </p>

    <a
      href="#"
      class="blog-card__button"
    >
      詳しく見る
    </a>
  </div>
</article>

CSS

.blog-card {
  display: flex;
  gap: 20px;
  border: 1px solid #ddd;
  padding: 20px;
}

.blog-card__image {
  width: 200px;
}

.blog-card__body {
  flex: 1;
}

.blog-card__title {
  margin-bottom: 10px;
}

.blog-card__text {
  margin-bottom: 20px;
}

.blog-card__button {
  display: inline-block;
}

構造が非常に分かりやすくなっています。

BEMを使う際の注意点

クラス名が長くなる

BEMの欠点として、クラス名が長くなる傾向があります。

.blog-card__button--primary

しかし、可読性や保守性を考えると大きなデメリットではありません。

深い階層を表現しない

初心者がやりがちな例です。

.card__body__title

これはBEMでは推奨されません。

代わりに、

.card__title

とします。

BEMはHTML構造ではなく、部品としての役割を表現する考え方です。

BEMとCSS設計の関係

BEMは単なる命名ルールではなく、CSS設計の一部として利用されることが多いです。

CSS設計について詳しく知りたい場合は、以下の記事も参考になります。

関連記事

BEMとFLOCSSの違い

FLOCSSはCSS設計全体のルールです。

一方、BEMは命名規則です。

つまり、

  • FLOCSS → 設計手法
  • BEM → 命名ルール

という関係になります。

実際の現場では、

  • FLOCSSで設計する
  • BEMで命名する

という組み合わせがよく使われています。

まとめ

BEMはCSSを管理しやすくするための代表的な命名規則です。

主なポイントは以下の通りです。

  • BEMはBlock・Element・Modifierの略
  • Blockは独立した部品
  • ElementはBlock内の要素
  • Modifierは状態や見た目の違い
  • クラス名だけで構造が分かる
  • CSSの競合を防ぎやすい
  • 保守性と再利用性が向上する

CSSを書く量が増えるほど、命名規則の重要性は高まります。

これからCSS設計を学ぶ場合は、まずBEMを理解し実践することがおすすめです。