BEMとは？基本的な構成について解説【命名規則】

大きいチームでプロジェクトを進めていく際、CSSをメンテナンスすることは困難がつきまとうものです。その困難を解決すべく、この記事ではBEM (Block Element Modifier) について解説します。

BEMとは

BEMはBlocks-Elements-Modifiersの略で、HTMLおよびCSSのクラスにおける命名規則です。BEMは Yandexで開発されました。 BEMを使うと、プロジェクトコードが読みやすく、理解がしやすくなり、CSSを操作するときに拡張および保守が容易になります。

命名規則は、フロントエンド開発者がそのコードの意味と機能を理解できるものとなります。その後他の開発者が、あなたが書いたコードを読むとき、開発者はあなたが何を意図してコードを書いたのかを理解できるので、後の分析・変更・管理が簡単になります。

BEMの命名規則を使用するメリット

小さなプロジェクトではBEMは使用されないかもしれませんが、大きなプロジェクトやチームではBEMは非常に重要になります。その理由は以下になります。

チーム全体が簡単に連携できる

チームでプロジェクトを進めて行くと、全員が独自のクラス名を持ち、互いに競合することがあります。そこでBEMを使用することで、構造が明確になり、使用時に簡単に追跡できるため、この問題が解消されます。

モジュール

各ブロックのクラスは他の要因の影響を受けないため、あるクラスのCSSが別のクラスに影響を与えることを心配する必要がなくなります。

再利用できる

ブロックを互いに独立して作成し、それらを使いやすく再利用することで、CSSコードの量を減らすことができます。

BEMの基本的な構成

Block

ブロックは、新しい要素の主要なクラス名です。ブロックの主な機能は、ページ上のどこでも再利用できることです。また、これらのブロックは他のブロックに配置されている場合があります。ブロック名は要素に応じて明確に設定されています。

Elements（要素）

ブロックのコンポーネントであり、ブロック内に配置され、その親ブロックに依存しているため、ブロックなしでは独立して存在しません。 BEMでは、要素は二重下線「__」で示されます。

Modifier

ブロックまたは要素の表示タイプを変更するために使用されます。モディファイアは個別のコンポーネントとして使用されます。モディファイア名はブロック名または要素名で構成され、「-」で区切られます。

/* Block (ブロック) */
.btn { }
 
/* Element (要素),上のブロックによって異なります*/
.btn__price { }
 
/* Modifier (モディファイア)はブロックの状態を変更します*/
.btn--orange { }
.btn--big { }

このクラスの命名規則により、コンポーネントを表すブロックがあり、この例では.btnがあります。ブロックは、1つ以上の子要素が関与する親としても機能します。 Elementのクラス名とそのBlockとの関係は、Blockの名前、2つの下線、最後にElement .btn__priceの名前で表されます。 BEMの3番目のコンポーネントは、ブロック/要素の状態またはその他の派生物の調整に役立つ修飾子です。修飾子の名前は、前のブロック/要素の名前と2つのダッシュ .btn--orangeで結合されます。