CSSの命名規則にBEMを取り入れてみる

今年もあと一月ということでブログをリデザインしました。ということでこの記事は BEM Advent Calendar 2013 1日目のエントリです。日付過ぎてしまいましたね。

BEMって何?

BEMとはBlock, Element, Modifierの頭文字をとったもので、フロントエンド設計において命名規則やモジュールの管理に前述の3種類の区分を取り入れたものを言います。今回はタイトルにもある通り、CSSの命名規則に BEM を取り入れてみるということで、BEMなCSSについて記載します。

BEMるとどういう良いことがあるの?

いろんな人がすでに書いているので別エントリを参考になさってください。あるいは、今回のAdvent Calendarに参加した方のエントリも参考になるかと思います。

なんとかBEMなCSSを書いた

ブログのリニューアルに合わせてBEMなCSSを書きました。書いたけど、難しかったです。構造が深くなった時、Blockはどこまで保持するのか、Elementにするのかしないのか、マルチクラスはどこまで許容するのか......。

デザイン上の制約というかやりたいことの実現のために、.layout--horizonというBlockを作ってしまったので自分で見るのがつらいです。さらにHTML側にも規則を作って、.layout--horizon__item > [class*="-header__item"]なんてCSSも書いてしまう始末。もう二度つらい。詳しくはソースをご覧いただければと思います。

BEM道

命名規則にBEMストレートなセレクタを作るためにはHTML側を制約する場合もあるかもしれません。BEMのコアである「BEMツリー = DOMツリー」に則れば、BEMツリーを見てDOMを推察できなければそれは命名の仕方が良くないということになります。BEMで説明できないことはHTML側にあってはならない。それがBEM道なのかもしれません。

そんなにうまくいくわけがない

前述した通り、BEMで難しいのはElementの取り方です。すんなり書けるのは2階層までで、3階層になると迷いが出ます。Blockを入れ子にしていくのか、Elementをつないでいくのか、やるなら統一しなければ BEM道ではない(部分的にルールが変わると厳格さが失われ、メンテナブルとは言えない)ですね。あるいはElement-blockというような「内包ブロック」なものをつないで、結果.Block__Element-block2__Element2-block3__Element3--Modifierのようなセレクタを受け入れるのか......。

BEM道を進むために必要なたった1つのこと

「スタイルを管理しようとすると発狂するので、DOMツリーを説明することだけ考えること」


2日目はげこたんさん ですすでに書いてました