BEMに向いているデザイン、向いていないデザイン
- 公開日
- タグ
- Advent Calendar
- BEM
- CSS
BEM Advent Calendar 2013 21 日目のエントリです。
BEM についてツーイッタなどでぼやいていると、「BEM は向いているデザインと向いてないデザインがある感じする」みたいなエアリーツーイットを観測することがあります。BEM に向いているデザイン、それってつまりデザインから HTML を起こす時に Block, Element のツリー構築がしやすそうで、Modifier 管理にできそうな状態の違いを含んでるデザインってことでしょうか。向いていないデザインというとその逆ですかね。そうだなと思わないでもないのですが、よくよく考えてみると BEM には向き不向きなデザインというものが本当にあるのか、疑問なのでポエムを綴ります。
そもそも BEM ってスタイルをしやすくするためにあるのではないと思うんです。以前、こんなツーイットをしました。
BEM、発祥がプロジェクトにおいてチームメンバーが変わった時でも、エンジニアがアサインしやすい構造を提供するためと、併せてメンテナンス性も提供するためっていうのがあるので、デザインからHTML起こす時のイニシャルコストは考えられていない。— 越智 (@o_ti) 2013, 12月 11
これは BEM に関してもっとも世間に勘違いされていると感じるところなのですが、BEM は OOCSS などとは違ってスタイルをモジュール化しようとか目的のデザインに最速でたどり着けるようなルール作りをするためのものではありません。BEM におけるデザインへのアドバンテージはせいぜい「CSS セレクタから HTML 要素への適応範囲をできるだけ確実に予測できる」程度のものでしかないと思います。こういった面から見ても、BEM に向いているデザイン・向いていないデザインというものは存在しないと思う次第です。
では何のために BEM を導入するのか、というと上記でも書いているとおりなのですが、言い換えれば「メンバーが入れ替わってもメンテナンス性が損なわれない構造づくりのため」ということになるかと思います。BEM という厳格なルールの中にあえて閉じこもることで、メンバーが何か新しいことをしでかさないようにしているのです。新しいことを取り入れたメンバーがいなくなった時、残されたメンバー全員の学習コストが上がらないように。BEM にはあまり自由度はありませんが、ふわふわになりがちなクラス付けに強い縛りがあれば、既存サイトでの要素追加や変更の時はもちろん、メンバー単位、プロジェクト単位で引き継ぎが発生したとしても、そのサイトの有り様を説明するコストをもっとも抑えることができるのです。
BEM が Yandex という検索サイトで使われているのも興味深いです。検索サイトといえば使い勝手とサイト内回遊率がサービスの存続に直結していますから、マイナーアップデートなどは頻繁に行われているでしょう。トレンドの移り変わりの早い Web において何度するかもわからないリニューアルに耐え、朝令暮改な指示にも屈することなく、今日自分が突然死のうと明日知らない人が突然来ようと、その後のメンバーに与える影響を最小限に抑える命名規則、それが BEM です。
BEM にとってサイトのデザインなんてものは飾りです。区切り文字がキモいとかどうでもいいのです。みなさんもっと BEM 神の声を聞いてください。