• Home
  • Web制作
  • CSS設計の強い味方！BEM記法で読みやすく整理整頓されたコードを書こう！

CSS設計の強い味方！BEM記法で読みやすく整理整頓されたコードを書こう！

schedule
Tags: CSS

CSS設計の強い味方！BEM記法で読みやすく整理整頓されたコードを書こう！

WebサイトやWebアプリケーションの見た目を整えるCSS。しかし、規模が大きくなるにつれて、CSSのコードは複雑になりがちです。

スタイルが他の要素に影響してしまったり、意図しない箇所のデザインが崩れてしまったりと、CSSの管理には何かと苦労がつきもの。

そんな悩みを解決する手段の一つとして、BEM記法というCSSの設計手法があります。

この記事では、BEM記法の概要からメリット、具体的な命名規則、活用事例までご紹介します。BEM記法を理解して、CSS設計の向上に役立てていきましょう。

あわせて読みたい
CSS設計の基礎力UP！ クラス設計のベストプラクティスをご紹介

BEM記法とは？

BEM記法とは、CSSのクラス名に一定のルールを設けることで、CSSの構造を整理整頓するための命名規則のことです。

BEMは「Block（ブロック）」「Element（エレメント）」「Modifier（モディファイア）」の頭文字を取ったもので、それぞれ以下のような役割を持っています。

  • Block（ブロック）: ヘッダーやフッター、メニューなど、Webページを構成する独立したコンポーネントを指します。
  • Element（エレメント）: ブロックを構成する要素を指します。例えば、ヘッダーブロックにおけるロゴやナビゲーションなどが該当します。
  • Modifier（モディファイア）: ブロックやエレメントのバリエーションを表します。例えば、ボタンの色違いやサイズ違いなどが該当します。

なぜBEM記法を使うべきなのか？

BEM記法を用いることには、主に以下のようなメリットがあります。

  1. 名前の衝突を防ぐ: BEM記法では、クラス名をブロックごとに区別するため、他のブロックのスタイルと干渉するリスクを減らせます。

  2. コードの可読性向上: クラス名を見れば、どのブロックのどの要素に対するスタイルなのかが一目でわかるため、コードの可読性が向上します。

  3. コードの再利用性向上: ブロックは独立したコンポーネントとして設計されるため、他のプロジェクトやページでも再利用しやすくなります。

  4. 保守性の向上: 特定のブロックのスタイルを変更する場合でも、他のブロックへの影響を最小限に抑えられます。

BEM記法の具体的な命名規則

BEM記法では、クラス名を以下のルールに従って命名します。

.block {}
.block__element {}
.block--modifier {}
.block__element--modifier {}
  • ブロック名、エレメント名、モディファイア名はすべて小文字で記述します。
  • ブロックとエレメントは2つのアンダースコア（__）で繋ぎます。
  • ブロックとモディファイア、またはエレメントとモディファイアは2つのハイフン（–）で繋ぎます。

BEM記法 命名例

例えば、「ニュース」セクションの例を見てみましょう。

  • news: ブロック名
  • news__title: ニュースセクションのタイトル（エレメント）
  • news__list: ニュース記事のリスト（エレメント）
  • news__item: リスト内の各ニュース記事（エレメント）
  • news__item--featured: 特集記事（モディファイア）

このように、BEM記法に従って命名することで、HTMLの構造とCSSのクラス名が明確に対応付けられます。

BEM記法を活用して、より良いCSS設計を！

BEM記法は、CSSのコードを整理整頓するための強力なツールです。

最初は慣れないかもしれませんが、使い続けることで自然と可読性や保守性の高いCSSコードを書けるようになるでしょう。

ぜひ今回の内容を参考に、BEM記法を活用してみてください。

関連記事