もうCSSで消耗しない！BEMという「命名規則」で、破綻しない設計を手に入れる

公開日: 2025年9月24日

プログラミング学習を進め、自分のWebサイトのデザインにこだわり始めると、誰もが必ず通る道があります。 それは、「CSSカオス」です。

最初は綺麗だったはずの style.css が、機能追加を繰り返すうちに、どんどんカオスになっていく。
「ここのボタンの色を変えたら、あっちのカードの色まで変わってしまった！」
「この .title って、どのページのタイトルだっけ…？」
「もうどこを触っても怖くて、!important で無理やり上書きするしかない…」

【実録】「.btn」の呪いにかけられた私の黒歴史

これは私がまだWeb制作会社に入りたての頃の実話です。 当時担当していたECサイトの改修案件で、私は何も考えずに「購入ボタン」に .btn という、とても短くて覚えやすいクラス名を付けました。

数日後、クライアントから「お問い合わせページの送信ボタンのデザインが崩れている」と連絡が入りました。 原因は、私が書いた .btn のスタイルが、サイト内の全てのボタンに適用されてしまっていたことでした。

焦った私は、購入ボタンだけを直そうと、急いで div .main-content .btn のように、親要素を繋げてCSSの詳細度（強さ）を無理やり上げました。 すると今度は、スマホ版の表示でおかしくなる…。最終的に私は、禁断の呪文 !important をあちこちに記述し、そのCSSファイルは「二度と誰も触りたくない魔窟」と化してしまったのです。

もしあの時、私がきちんとした「命名規則」を知っていれば、あんな冷や汗をかくことはありませんでした。

今日は、このCSSカオスという悪夢からあなたを解放し、大規模なサイトでも破綻しない、メンテナンス性の高いCSS設計を可能にするための、非常にシンプルで強力な「命名規則」、BEM（ベム）をご紹介します。

BEMとは何か？：3つの要素で考える

BEMとは、Block, Element, Modifier の頭文字を取ったもので、CSSのクラス名を、以下の3つの構成要素の組み合わせで命名するという、非常にシンプルなルールです。

• Block: ページを構成する、独立した大きな部品。（例: ヘッダー, 検索フォーム, 記事カード）
• Element: そのBlockを構成する、小さな部品。（例: ヘッダーのロゴ, 検索フォームの入力欄, 記事カードのタイトル）
• Modifier: BlockやElementの、見た目や状態の違いを表すもの。（例: 赤いボタン, 無効化されたボタン, 大きな記事カード）

BEMの具体的な書き方

BEMの魔法は、その独特なクラス名の繋ぎ方にあります。

• BlockとElementは、アンダースコア2つ (`__`)で繋ぐ。
• BlockやElementとModifierは、ハイフン2つ (`--`)で繋ぐ。

例：シンプルな「記事カード」をBEMで設計する

言葉だけだと分かりにくいので、具体的な例を見てみましょう。 以下のような、シンプルな「記事カード」コンポーネントを作るとします。

HTML構造:

<!-- Block: 記事カード全体 -->
<div class="card">
    <!-- Element: カードの画像 -->
    <img class="card__image" src="...">
    
    <!-- Element: カードの本文エリア -->
    <div class="card__body">
        <!-- Element: カードのタイトル -->
        <h3 class="card__title">記事のタイトル</h3>
        
        <!-- Element: カードのボタン -->
        <a href="#" class="card__button">続きを読む</a>

        <!-- Element: ボタン, Modifier: "primary"という見た目の違い -->
        <a href="#" class="card__button card__button--primary">もっと読む</a>
    </div>
</div>

CSS:

/* Block */
.card {
    border: 1px solid #ddd;
    border-radius: 8px;
}

/* Elements */
.card__image {
    width: 100%;
}
.card__title {
    font-size: 18px;
    margin: 0;
}
.card__button {
    display: inline-block;
    padding: 8px 12px;
    border: 1px solid #ccc;
}

/* Modifier */
.card__button--primary {
    background-color: #1a73e8;
    color: white;
    border-color: #1a73e8;
}

BEMがもたらす3つの絶大なメリット

1. クラス名が絶対に重複しない

.card__title というクラス名を見れば、それが「カードという部品の中のタイトル」であることが一目瞭然です。ページのメインタイトルである `.main__title` や、サイドバーのタイトル .sidebar__title と、名前が衝突することは絶対にありません。

2. スタイルが予測可能になる

--primary というModifierは、.card__button にしか影響を与えません。.card__button--primary の色を変えても、他のボタンの色が変わってしまう、という悪夢のような副作用から解放されます。

3. HTMLの構造が理解しやすくなる

クラス名を見るだけで、そのHTMLがどのような部品の入れ子構造になっているのかを、CSSファイルを開かなくても推測できるようになります。これは、チーム開発において絶大な効果を発揮します。

まとめ

BEMは、最初は少し冗長で、書くのが面倒に感じるかもしれません。 しかし、この小さな規律を守るだけで、あなたのCSSは驚くほど整理され、メンテナンスしやすく、そして再利用しやすい「資産」に変わります。

大規模なWebアプリケーションになればなるほど、このBEMという命名規則の真価が分かるはずです。 ぜひ、あなたの次のコンポーネントから、このシンプルで強力な設計手法を取り入れてみてください。