BEMに向いているデザイン、向いていないデザイン

BEM Advent Calendar 2013 21日目のエントリです。

BEMについてツーイッタなどでぼやいていると、「BEMは向いているデザインと向いてないデザインがある感じする」みたいなエアリーツーイットを観測することがあります。BEMに向いているデザイン、それってつまりデザインからHTMLを起こす時にBlock, Elementのツリー構築がしやすそうで、Modifier管理にできそうな状態の違いを含んでるデザインってことでしょうか。向いていないデザインというとその逆ですかね。そうだなと思わないでもないのですが、よくよく考えてみるとBEMには向き不向きなデザインというものが本当にあるのか、疑問なのでポエムを綴ります。

そもそもBEMってスタイルをしやすくするためにあるのではないと思うんです。以前、こんなツーイットをしました。

これはBEMに関してもっとも世間に勘違いされていると感じるところなのですが、BEMはOOCSSなどとは違ってスタイルをモジュール化しようとか目的のデザインに最速でたどり着けるようなルール作りをするためのものではありません。BEMにおけるデザインへのアドバンテージはせいぜい「CSSセレクタからHTML要素への適応範囲をできるだけ確実に予測できる」程度のものでしかないと思います。こういった面から見ても、BEMに向いているデザイン・向いていないデザインというものは存在しないと思う次第です。

では何のためにBEMを導入するのか、というと上記でも書いているとおりなのですが、言い換えれば「メンバーが入れ替わってもメンテナンス性が損なわれない構造づくりのため」ということになるかと思います。BEMという厳格なルールの中にあえて閉じこもることで、メンバーが何か新しいことを しでかさないようにしているのです。新しいことを取り入れたメンバーがいなくなった時、残されたメンバー全員の学習コストが上がらないように。BEMにはあまり自由度はありませんが、ふわふわになりがちなクラス付けに強い縛りがあれば、既存サイトでの要素追加や変更の時はもちろん、メンバー単位、プロジェクト単位で引き継ぎが発生したとしても、そのサイトの有り様を説明するコストをもっとも抑えることができるのです。

BEMがYandexという検索サイトで使われているのも興味深いです。検索サイトといえば使い勝手とサイト内回遊率がサービスの存続に直結していますから、マイナーアップデートなどは頻繁に行われているでしょう。トレンドの移り変わりの早いWebにおいて何度するかもわからないリニューアルに耐え、朝令暮改な指示にも屈することなく、今日自分が突然死のうと明日知らない人が突然来ようと、その後のメンバーに与える影響を最小限に抑える命名規則、それがBEMです。

BEMにとってサイトのデザインなんてものは飾りです。区切り文字がキモいとかどうでもいいのです。みなさんもっとBEM神の声を聞いてください。


22日目は s12btさんが 既に書いていました。広がるBEMerの輪。