【完全ガイド】BEMによるCSS設計入門！書き方と実務のコツ

はじめに

Webサイトを作る際、目に見えるデザインに目が行きがちですが、実は裏側の設計がサイトの寿命や運用コストを大きく左右するんですよ。特に「BEM（ベム）」というCSSの設計手法を取り入れると、将来サイトの更新を続けてもコードが複雑化せず、複数人での作業でも表示が崩れにくい、保守性の高いサイトが作れます。

「BEM」ですか？それってどういう意味ですか？CSSという言葉もよく耳にするのですが、実はよく分からなくて……。

CSSはWebサイトの見た目を整えるための言語で、BEMはそのコードの書き方のルールのひとつです。例えるなら、家づくりで「このドアはリビング用」と誰が見ても一目でわかるように、部品一つ一つに分かりやすく名前をつけて整理整頓しておくようなものですね。

なるほど、あらかじめ整理整頓のルールをしっかり決めておくのですね。そうすれば、後から変更を加えたり別の人が作業したりしても、表示が崩れたり破綻したりしない、安全で運用しやすいWebサイトになるというわけですね！

CSS設計の手法「BEM」とは？基本概念を解説

まずは、BEMという手法の根本的な考え方について説明いたします。

なぜCSS設計（BEM）が必要なのか？

結論から申し上げますと、Webサイトを長期的に、そして安全にメンテナンスしていくためです。CSSが複雑になると、スタイルの優先順位がコントロール不能になります。その結果、ある部品を他の場所に流用した際に、予期せぬ表示崩れを起こす原因になります。 これは家づくりに例えると、リビングの壁紙を張り替えたら、なぜか無関係なお風呂場の天井の色まで変わってしまった、というような状態です。BEMを導入することで、作成した部品がどこに配置されても独立して機能するようになります。これにより、長期的なメンテナンスや、複数人でのチーム開発が容易になるという目的があります。 ルールを明確にすることで、誰が触っても壊れない堅牢な家（Webサイト）を建てることができるのです。

BEMを構成する3要素（Block, Element, Modifier）

BEMという名前は、「Block（ブロック）」「Element（要素）」「Modifier（修飾子）」という3つの言葉の頭文字をとったものです。それぞれの役割は以下の通り、簡潔に定義されます。

Block：独立したコンポーネント（部品）のことです。 Element：Blockを構成する要素のことです。 Modifier：状態やバリエーションを表すものです。

これを「カード型のUI（画像、タイトル、テキスト、ボタンで構成されるもの）」を例にして視覚的にイメージしてみましょう。カード全体を囲む「大きな枠」がBlockに該当します。その中にある画像やタイトルを囲む「内側の枠」がElementです。そして、色違いのボタンなどに付与される「目印」がModifierにあたります。このように要素を分けて考えることで、それぞれのクラス名（HTMLに付ける目印）がどのように付与されるかを直感的に理解することができます。

具体的なコードで見るBEMの基本構造（カード型UIの例）

概念的なルールをご理解いただいたところで、実際のHTMLとCSSのコードを見てみましょう。先ほど例に挙げた「カード型のUI」をBEMでコーディングすると、以下のようになります。

HTMLの記述例

<article class="card">
  <img src="thumbnail.jpg" alt="" class="card__image">
  
  <h2 class="card__title">CSS設計の基本</h2>
  
  <p class="card__text">BEMを使った保守性の高い書き方を学びましょう。</p>
  
  <a href="#" class="card__btn card__btn--primary">詳細を見る</a>
</article>

CSSの記述例

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

/* Element */
.card__image {
  width: 100%;
  height: auto;
}

.card__title {
  font-size: 1.5rem;
  font-weight: bold;
}

.card__text {
  color: #333;
}

/* Element (基本のボタン) */
.card__btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 4px;
  background-color: #eee;
  color: #333;
}

/* Modifier (強調・プライマリーカラーのボタン) */
.card__btn--primary {
  background-color: #007bff;
  color: #fff;
}

このように、CSS側ではタグ名（h2やp）に直接スタイルを当てるのではなく、すべてクラス名に対してスタイルを定義します。これにより、後からHTMLのタグが変更されても表示が崩れにくく、HTMLを見ただけで「これはカードを構成するどの要素か」がひと目でわかるようになります。

BEMの命名規則と具体的な書き方

続いて、実際の開発現場でどのように名前をつけていくのか、そのルールを解説します。

Block（ブロック）の設計と命名規則

Blockは、機能的に独立した使い回せるパーツであることを意味します。 店舗で例えるなら、「レジカウンター」や「商品棚」など、それ単体で意味を持ち、店内のどこに置いても機能する家具のようなものです。命名する際は、英単語をハイフン等で繋ぎます。ここで重要なのは、見た目（例：赤い四角）ではなく、「何であるか（例：header, card）」を名付けるようにすることです。

Element（エレメント）の設計と命名規則

Elementは、Blockの中でのみ意味を持つ要素です。 先ほどの「商品棚（Block）」で言えば、その棚に取り付けられた「値札」や「仕切り」がElementにあたります。これらは棚から外して単体で置かれていても、あまり意味を成しません。命名ルールとして、 block__element のようにアンダースコア2つで繋いで記述します。また、構造が深くなっても、Elementの中にElementをネストする命名（例： block__element__element ）は避けるべきであると強く推奨されています。

Modifier（モディファイア）の設計と命名規則

Modifierは、パーツの見た目（色やサイズ）や、状態（アクティブやエラー）を変える際に使用します。
店舗の「商品棚（Block）」に、「セール中（Modifier）」という状態を追加するようなイメージです。書き方のルールとして、 block–modifier や block__element–modifier のようにハイフン2つで繋いで表します。

BEM設計を導入するメリットとデメリット

優れた設計手法であるBEMですが、メリットだけでなくデメリットも存在します。

BEMのメリット（保守性・再利用性の向上）

最大のメリットは、クラス名を見るだけでHTMLの構造や役割が直感的に理解できるため、可読性が高いことです。また、名前の付け方に厳格なルールがあるためクラス名が一意になり、CSSのスタイルの衝突（干渉）を避けることができます。
引越しの段ボールに「割れ物・キッチン用・お皿」と詳細に書いておけば、誰が運んでも中身がわかり安全に扱えるのと同じように、他の人が書いたコードでも迷わず安全に編集できる強みがあります。

BEMのデメリット（クラス名が長くなる等）とその対策

デメリットとしては、詳細な名前をつけるため、どうしてもクラス名が長く冗長になってしまうことが挙げられます。この対策として、エディタ（IDE）の補完機能を活用することが有効です。また、CSSを効率的に書くための技術を活用したり、チーム内で略語ルールの統一を行ったりすることで、このデメリットを解消できます。

【実務編】BEM設計でよくある悩みと解決策

ここでは、現場のプロが直面するリアルな悩みと、その解決策をお伝えします。

Blockに余白（margin）を持たせない理由と対策

実務で初心者が最もつまずきやすい失敗例として、Block自体に余白をつけてしまい、再利用できなくなるケースがあります。再利用性を高めるため、Block自体にはmarginなどの周りに影響を及ぼすスタイルを設定すべきではありません。 家具（Block）自体に、周囲1メートルの立ち入り禁止エリア（margin）が固定でくっついていると、狭い部屋に配置できなくなってしまうのと同じです。

これを解決し、どこにでも配置できる柔軟なパーツを作るための手法が「Mix（ミックス）」です。これは、ひとつのHTML要素に対して「独立したBlockのクラス」と「親要素から見たElementとしてのクラス」の2つを同時に付与するテクニックです。

悪い例（Blockに余白をつけてしまう）

/* 独立した部品であるはずのカードに、固定の余白がついてしまっている */
.card {
  margin-bottom: 40px; 
}

Mixを使った良い例

<section class="news-list">
  <div class="card news-list__item">
    </div>
</section>

/* Block: カード自体の見た目のみを定義し、外側の余白は持たない */
.card {
  border: 1px solid #ccc;
  padding: 16px;
}

/* Layout (Mix): 親要素側で、配置するための余白を管理する */
.news-list__item {
  margin-bottom: 40px;
}

このように役割を切り離すことで、「カード」という部品はそのままに、配置するレイアウト側で自由に間隔をコントロールできるようになります。

Sass（SCSS）での「&」のネスト問題と検索性

開発現場ではSass（SCSS）がよく使われます。Sassで &__element のように省略して書くと、階層がわかりやすいという利点があります。しかしその反面、コードが長くなると親要素が分かりにくくなり、検索性も落ちてしまうという実務ならではのデメリットが存在します。

このリアルな悩みに対する解決策として、あえて & で繋がずにフルネームでクラスを書くという運用方法も選択肢として提示されます。これは現場のリアルな悩みから生まれた、非常に有益なノウハウです。

最新のVanilla CSS（標準CSS）でのBEMの書き方

これまでのWeb制作現場では、BEMの長いクラス名を効率的に書くためにSassなどの拡張言語を導入することが一般的でした。しかし現在では、ブラウザの標準CSS（Vanilla CSS）そのものが進化し、Sassを使わなくても非常にスマートに記述できるようになっています。

特に最新のCSSでは「ネスト（入れ子）」機能が標準でサポートされたため、特別な環境構築を行わなくても、純粋なHTMLとVanilla CSSだけでBEMを効率よく設計・実装することが可能です。学習コストを抑えつつ、すぐに堅牢なコーディングを始めたい方にとって、現在の標準CSSとBEMの組み合わせは非常に強力な選択肢と言えます。

キャメルケースを活用したクラス名の短縮化

BEM特有のハイフンやアンダースコアが連続すると、文字の羅列が見にくくなるという問題があります。これに対し、単語の区切りにキャメルケースを採用してクラス名をスッキリさせる方法が提案されます。例えば search-result ではなく、単語の頭文字を大文字にする searchResult のように記述することで、コード全体の可読性を保ち、見やすさを向上させることができます。

WordPressなどのCMSやプラグインとBEMを共存させるコツ

実務においては、すべてをゼロから記述するのではなく、WordPressなどのCMSをベースにWebサイトを構築するケースが多くあります。 ここで問題になるのが、「SWELL」のようなテーマや「Snow Monkey Forms」といったお問い合わせフォームのプラグインが自動出力する独自のクラス名と、自身で書いたBEMのクラス名が混在してしまうことです。システムが吐き出すHTMLを無理にBEMの命名規則に書き換えようとすると、アップデート時に不具合を起こす原因になります。

このような場合は、無理にすべてをBEMで統一しようとせず、「ここから先はプラグインの領域」と割り切る設計が重要です。例えば、 .contact-form-wrapper という独自のBlockを作り、その中にあるシステム出力の要素に対しては、BEMの規則を適用せずに入れ子（ネスト）でスタイルを当てるという柔軟なルールを定めておくと、システムの恩恵を受けつつ破綻の少ない運用が可能になります。

他のCSS設計（OOCSS・SMACSS）との比較

最後に、BEM以外の代表的な設計手法と簡単に比較してみましょう。

OOCSSやSMACSSとの違いとBEMの強み

CSSの設計手法には、構造と見た目の分離を目的とした「OOCSS」や、5つのカテゴリ分類を行う「SMACSS」などの概要があります。これらと比較した際、BEMはより具体的で実践的な命名規則を持っています。そのため、大規模なプロジェクトや複数人でのチーム開発における名前の衝突回避に最も適していると結論づけられます。
ルールが明確であるため、個人の感覚に依存せず、常に一定の品質を保つことができるのがBEMの最大の強みです。

まとめ

今回はCSS設計手法である「BEM（ベム：部品ごとに独立させて表示崩れを防ぐ、コードの書き方のルール）」について解説しました。これを導入することで、将来的なデザイン変更やページ追加にも柔軟に対応できる、保守・管理に強いWebサイトを作ることができます。

表面的なデザインだけでなく、裏側の設計が今後のサイト運営を大きく左右するのですね！

おっしゃる通りです。ですので、今後のホームページ制作やリニューアルの際は「将来を見据えた設計がされているか」という視点で、ぜひ私たちのような専門知識を持つプロへお気軽にご相談くださいね。

よくわかりました。将来の運用までしっかり考えて作っていただけるプロの方に、まずは一度相談してみたいと思います！