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

Advent Calendar
BEM
CSS
HTML

今年もあと一月ということでブログをリデザインしました。ということでこの記事は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日目はげこたんさんですすでに書いてました