ホームページの構築作業に関わっていると、「もっとCSSを効率的に書きたい」と感じたことが一度はあるのではないでしょうか。

CSSが1996年に誕生してから20年以上経ち、サポート等は充実してきたものの書き方については特段簡素化されてはいません。
その中で「もっと効率的にCSSを書きたい」という要望を拾って具体化されていったのがBEM(ベム)と呼ばれる概念です。

CSSを効率的に書くことは、時間の短縮になるだけでなく、保守運用の面でもメンテナンスしやすくなります。
今回は、CSSを機能的にマークアップする概念「BEM」について、基本的な考え方や具体的なコーディング方法を解説します。

BEMが生まれるまで

bem.png
Built on Pablo

比較的小規模のサイトであれば、体系的にCSSを書く必要はあまりないかもしれません。
小規模サイトの場合は簡単なCSSを早速書いてみたり、SASSのようなプリプロセッサーを使ったりして構築を行うでしょう。
SASSは、プログラミングの知識があればより機能を活かしたコーディングを行うこともできます。

しかしながら、より大きく複雑なプロジェクトになれば、コードを体系的に書くことで効率性や機能性を高めることができます。
また、シンプルにすればするほど、ブラウザがコードを読み込む時間も早くなり、保守点検を行う際にもメンテナンスしやすくなります。

そうした点から、CSSを効率的に書くために、これまでもたくさんのメソッドが登場しました。

例えば、OOCSSは、コンテナーとコンテンツをCSSオブジェクトで分けて記述しようとしてきました。
また、SMACSSと呼ばれる書き方では、CSSの記述ルールを5つのカテゴリーに分けることで書き方を簡素化しようとしました。
SUITCSSではUIコンポーネントを効率的に構築するために、構造的なクラス名を付けることを推奨してきました。
そして、以前ferretでも紹介したAtomic Designでは、粒度の段階を定めることで俯瞰して構築できるようにしていきました。

こうしたメソッドのどれを選んでみても、体系的な構造のCSSやUIの利点を活かすことは可能です。
制限が少なくより柔軟なフレームワークもあれば、簡単に理解でき、プロジェクトに採用しやすいものもあります。

それでもBEMが選ばれるのは、SMACSSほど初めてのひとでも困惑することなく、OOCSS以上に体系だった記述ができ、理解しやすい用語で説明できるからです。
そのようなわけで、ブロックを組み立てるように構築することから2009年の登場当初「レゴ」と呼ばれていたBEMが普及していったのです。

BEMとは何か？

それでは、BEMとは、一体どのようなものでしょうか。

BEMとは、「Blocks」(かたまり)「Elements」(要素)「Modifiers」(状態)の3つの頭文字を取ったもので、その名の通り3つの考え方をクラス名で体系的につけていく方法です。

bembem.png
BEMをもとに作成

Blockとは、独立した意味の塊で、もう少しざっくり言えば親要素となります。
Elementは、Blockの中に含まれるパーツのことで、Blockに対する子要素ということもできます。

Modifierは、BlockやElementに対するフラグのようなものです。
見た目や状態(disabledやfocus、highlightedやsize-bigなど)の情報を付け加えます。

例えば、以下の画像はGitHubのトップページのキャプチャーですが、これをBlock・Element・Modifierに分けると、次のようになります。

git.png
BEMをもとに作成