私はCSS/HTMLの開発の際、構成管理をどのようにすれば良いか考える機会がありました。どんなコードベースでも以下の点の改善ができれば、開発のプロセスがもっと早く、もっと簡易に、もっと確かになるためです。
- 再利用性
- 拡張性
- 開発生産性とメンテナンス性
上記の点の改善を可能にするCSSとHTML設計手法のうちの一つにBEMがあります。どのように改善ができるか、詳しく説明したいと思います。
再利用性
BEMにはブロックとエレメントいう２つの概念があります。
ブロックとは独立した存在で、デザインの「構成要素」であります。ブロックはコンテキスト（親HTMLエレメント等）に依存せずに、ページのどこの位置に配置されても自分の機能を保つべきものです。
ブロックを組み合わせて、アプリケーションページを組み立てます。
エレメントは、ブロックの一部分であり、特定の役割を果たしています。 エレメントはコンテキストに依存していて、そのエレメントが属するブロックだけで利用されています。
ブロックとブロックの中にネストされたエレメントの例：
ブロックの独立した性質のおかげで、他のブロックと自由な組み合わせでアプリケーションのどこのページにでも簡単に再利用ができます。
拡張性
BEMには更にモディファイヤーという概念があります。
モディファイヤーはブロックとエレメントのスタイルにバリエーションを持たせるためのものです。CSSとHTMLの開発フェーズが終わっていても、CSSのベーシックな知識しか持っていないチームメンバーでも新しいモディファイヤーを追加することで、既存のブロックやエレメントのデザインの変更が簡単にできます。
既存のブロックの背景色を変更するモディファイヤーを追加する例：
また、既存のモディファイヤーを組み合わせたりすることで、新しいデザインが作れます。
既存の二つのモディファイヤーの組み合わせで新しいデザインのボタンを作成する例（ボタンの色とサイズの組み合わせ）：
開発生産性とメンテナンス性
ブロックはコンテキストに依存しない存在であるため、ブロックを組み合わせることでページの作成が可能になります。
CSSとHTMLの作成を外部デザイナーに依頼する場合、アプリケーションページの全体の作成ではなく、必要なブロックだけの作成を依頼すれば、あとは基本レベルのCSSとHTMLの知識を持つチームメンバーでもブロック利用して、アプリケーションページの組み立てができます。
２つのブロックの簡単な組み立ての例：
簡略化されたBEMへのアプローチ
BEM自体は結構大きなフレームワークです。CSS設計ルールだけではなくて、専用のテンプレートエンジンやビルドツールやJavaScriptを取り扱う方法などが含まれています。このフレームワークの全ての要素を導入するには、相当な努力が必要でしょう。
幸いなことに、ブロック、エレメント、モディファイヤーというコアコンセプトを有効に使うのに、全体のフレームワークを取り入れる必要はありません。BEMに基づいたCSS設計ルールだけを採用しても、BEMをはじめることができます。
弊社では、こういうCSS設計ルールセットを用意しております。この設計ルールセットのメインの部分を紹介したいと思います。
BEMに基づいたCSS設計ルール
- クラスのネーミング概念的に、クラスのネーミングルールはBEMのものと同じですが、ブロック、エレメント、モディファイヤーの区切り用のエレメントを自分の好みにあわせています。
各ブロックの定義は個別のファイルに納めることで、ブロック名の衝突を避けています。 - カスケードセレクターを利用しないコンテキストに依存してしまい、ブロックの再利用が困難になるため、カスケードのセレクターを利用しません。
エレメントの場合も同じです。理由は２つあります。- セレクターのspecificity（詳細度）が上がってしまうので、CSSルールが特殊になり、モディファイヤーでのスタイルの上書きが難しくなります。
Specificityというのは、CSSルールの優先順位のことです。複数のCSSルールが同じHTMLエレメントの同じ要素をコントロールしているとき、specificityが高い方が優先されます。基本的に、カスケードのあるセレクターのspecificityがカスケードのないセレクターより高いので、以下の例でテキストの色はredのままになり、モディファイヤーが効かなくなります。
だめな定義の例：
セレクターのspecificityが同じ場合、後から定義された方が優先になります。 - クラスのネーミングルールによって、エレメントのクラス名にすでにブロック名が入っているため、他のブロックのエレメントのクラス名との衝突はおきません。
- セレクターのspecificity（詳細度）が上がってしまうので、CSSルールが特殊になり、モディファイヤーでのスタイルの上書きが難しくなります。
- タイプセレクターを利用しない（セレクタにタグ名が使われているセレクターのこと）
- カスケードセレクターと同じように、specificityが上がるので、モディファイヤーでのスタイルの上書きが難しくなります。
- 定義された以外のエレメントでの利用が不可になります。
- セレクターにIDを利用しないIDを使ってしまうと、そのブロックをページ内で一回しか使えなくなるために、再利用が不可になります。
以上が設計ルールセットのメインの部分の紹介になります。
簡単なブロックのCSSとHTMLのサンプル
以下に簡単なブロックとモディファイヤーの定義と利用方法のサンプルを紹介します。
結果
まとめ
最近手がけたエンタープライズ向けプロジェクトでも上で説明したCSS設計手法を採用しています。その感想を簡単にシェアしたいと思います。
- 今回のプロジェクトではブロックのCSSとHTMLの作成を外部デザイナーに依頼していました。作成していただいたブロックを組み立て、合計で50以上の画面を作りましたた。ブロックの再利用が本当に簡単で、画面作成にかかるコストを大幅に減らせた印象があります。
- デザイナーからブロックのCSSとHTMLが納品された後でもデザインの多少の変更がありましたが、CSSの再設計を依頼せずに、モディファイヤーを利用することで既存のブロックの拡張が簡単にできました。
著者について
グリシン キリルは、11年前にロシアから来日し、2013年からエンラプトでウェブアプリケーションの開発に従事する。Functional Reactive Programmingに夢中で、クライアントサイドの開発を簡単に、より確かにするための研究を行う。