CSS は、比較的簡単に使いこなすことができます。しかし、それを使い続け綺麗な状態を長期的に保つこととは全く別の話です。知らず知らずのうちに乱雑になっていきます。ありがちですよね？そんな時、命名規則の出番です。様々な選択肢がある中で私が選んだのが BEM なのです。

BEM とは何か

BEM とは、命名規則の一種で、モジュラーでメンテナンス可能なスタイルを書くことができます。

BEM は、Block-Element-Modifier の略語で、クラス名は3つ[^1]のパートから成ります。実際の表記は block__element--modifier となり、Block から始まり、次に Element（アンダースコアが2つ）、そして最後に Modifier が続きます（ダッシュが2つ）。

Block（ブロック）

Block は、独立しており再利用できるものです。フロントエンドフレームワークにおけるコンポーネントと捉えらることもできるでしょう。例えば、card はよいブロックといえるでしょう。

注：shopping-list のような具体的な名前は避け、check-list 等のより一般的な名前にすることで、様々な場面で再利用可能になります。たとえば、check-list と命名すると、ショッピングでも TODO リストでも使えるでしょう。

Element（エレメント）

Element は、Block の中にのみ存在できるものです。例えば、card__title や card__text、card__button のようなものです。

注：Element は1階層だけネストできます。つまり、card__button__text とはできません。代わりに、button という Block を新たに定義し、button__text のようにしましょう。

Modifier（モディファイア）

Modifier は、Block または Element を修飾したい場合に使用します。例えば、見た目や動きが少しだけ違うものを作りたい場合などです。これに従うと、card--featured や card__button--primary のようなクラス名ができるでしょう。

注：Modifier は、あくまで修飾したいの時のみに使われ、従ってベースとなるクラスが必ず存在します。カードを例にするとこうなるでしょう：card card--featured。ベースとなる card クラスが padding や border を持っており、card--featured クラスは背景の色を変える、といった具合に。

[^1]: ネームスペースを prefix としてつけることもできます。

さらに詳しい情報は、こちらとこちらから。また、BEM でやっていいこと、悪いこと もあります。

なぜ BEM が G.R.E.A.T なのか

1. G = Global（グローバル）

BEM は、最も知られた命名規則の一つです。そのため、仮にあなたが新メンバーをプロジェクトに迎える時も、彼らはすでにこの命名規則について知っている可能性があり、意見の衝突を減らしたり、初日から生産的に働いてもらうこともできるのです。

2. R = Readable（読みやすい）

クラス名が説明的であるおかげで、スタイルシートが読みやすくなります。深くネストされたセレクタよりも、見やすくなるだけでなく、より早く動作します。

3. E = Expandable（拡張可能）

BEM では、CSS のセレクタ詳細度が最小限になるため、簡単にバリエーションを追加することができます。単一の Modifier クラスで十分です。同等のセレクタの詳細度のような苦労はありません。

4. A = Adaptable（適応性がある）

BEM は、そのモジュール的な特性により、フレームワークと相性が良いです。また、スタイルがタグの種類やネストに依存しないため、ドキュメント構文を変更した際にも壊れにくくなります。

5. T = Tough（難しい）

コンピューターサイエンスで難しいのは、キャッシュの無効化と命名の2つのみだ。

— Phil Karlton

BEM を使い始めようとした時、おそらくあなたは絶えずそれに苦戦するでしょう。しかし、それは逆によいことだと言えます：

• 適切なブロックの名前を探すことで、他の人にとってコードがきれいで読みやすくなります
• 同意語と取り組むことで、既存のブロックを再利用することを推奨してくれます
• マルチレベルのネスティングを避けることで、ドキュメントの構造を再考することになるでしょう

つまり、BEM は、詳細に注意を払うように仕向け、そのものについてよく考えさせ、結果としてコードの品質が高まるのです。どうです？はじめる準備はできましたか？

著者について

Joanna は EL Passion のフロントエンドエンジニアです。Linkedln で彼女について知ることができます。

EL Passion の Facebook、Twitter、Instagram もチェックしてください。