BEMの基本

ウェブ開発において、CSSはスタイルを適用するための重要な言語ですが、大規模で複雑なプロジェクトではスタイルの管理が難しくなります。

そこで登場するのがBEM（Block Element Modifier）というクラス命名規則です。

本記事では、BEMの基本的な概念と使い方について初心者向けに解説します。

フロントエンドエンジニアロードマップ一覧はこちら

BEMとは？

BEMは、スタイルシートを整理しやすくするための命名規則で、コンポーネント指向のCSS設計手法の一つです。

BEMは、以下の3つの主要な要素から成り立っています。

Block（ブロック）:

ブロックは独立して存在できる再利用可能なコンポーネントを指します。

例えば、ヘッダーやフッターがブロックの典型的な例です。

<div class="header">
  <!-- ヘッダーのコンテンツ -->
</div>

Element（エレメント）:

エレメントはブロック内で独立して存在できるサブコンポーネントを指します。

エレメントはブロックに依存しており、単独で存在することはありません。

<div class="header">
  <nav class="header__menu">
    <!-- メニューのコンテンツ -->
  </nav>
</div>

Modifier（モディファイア）:

モディファイアはブロックまたはエレメントの状態やバリエーションを指します。

同じブロックやエレメントが異なるスタイルを持つ場合、モディファイアを使って区別します。

<button class="button button--primary">Primary Button</button>
<button class="button button--secondary">Secondary Button</button>

BEMのクラス命名規則は、これらの要素を組み合わせて、クラス名を作成することで、スタイルの構造を明確にします。

BEMのメリット

1. 可読性が向上する:

BEMの命名規則は直感的であり、HTMLの構造を読みながらスタイルを理解しやすくします。

これにより、他の開発者がコードを理解しやすくなります。

2. 再利用性が高まる:

ブロックやエレメントは独立して存在できるため、再利用が容易です。

同じスタイルを持つコンポーネントが複数の場所で使用される場合、BEMを使うことで一貫性を保ちながら再利用できます。

3. メンテナンスがしやすい:

BEMはスタイルの一貫性を保つため、大規模で複雑なプロジェクトでもメンテナンスがしやすくなります。

どの部分がどのブロックやエレメントに属しているかが明確になるため、迅速に修正や変更ができます。

BEMの基本的な使い方

1. クラスの命名規則:

BEMでは、クラス名はブロック、エレメント、モディファイアの3つの要素から成り立ちます。

これらの要素は2つのアンダースコア(__)とハイフン(--)を使って組み合わせます。

• block__element
• block__element--modifier

2. HTMLへの適用:

HTMLにBEMを適用するには、以下のようにクラス名を付与します。

<div class="block">
  <div class="block__element"></div>
  <div class="block__element--modifier"></div>
</div>

3. 実践例:

例として、記事カードのデザインを考えてみましょう。

<article class="card">
  <img class="card__image" src="...">
  <div class="card__content">
    <h2 class="card__title">記事のタイトル</h2>
    <p class="card__description">記事の要約や説明文</p>
    <a class="card__link" href="#">続きを読む</a>
  </div>
  <div class="card__meta">
    <span class="card__date">2022-01-01</span>
    <span class="card__category card__category--highlight">Tech</span>
  </div>
</article>

このようにBEMを使うことで、記事カード内の各要素が明確に区別され、スタイルの適用や修正が簡単になります。

BEMの進化と発展

BEMはそのシンプルで効果的な構造から、多くのプロジェクトで採用されています。

さらに、BEMの発展形や拡張ライブラリも登場しており、開発者は自身のプロジェクトに合った形でBEMを利用できます。

まとめ

BEMは可読性、再利用性、メンテナンス性を向上させるための強力なツールです。

HTMLとCSSのコードベースが成長するにつれて、BEMのような命名規則を採用することで、プロジェクト全体の保守性が向上し、スタイルの一貫性が確保されます。

BEMをマスターすることで、スマートで効果的なCSS設計を実現しましょう。

フロントエンドエンジニアロードマップ一覧はこちら