CSSの命名規則にBEMを取り入れてみる
- 公開日
- タグ
- Advent Calendar
- BEM
- CSS
- HTML
今年もあと一月ということでブログをリデザインしました。ということでこの記事はBEM Advent Calendar 2013 １日目のエントリです。日付過ぎてしまいましたね。
BEM って何？
BEM とは Block, Element, Modifier の頭文字をとったもので、フロントエンド設計において命名規則やモジュールの管理に前述の３種類の区分を取り入れたものを言います。今回はタイトルにもある通り、CSS の命名規則に BEM を取り入れてみるということで、BEM な CSS について記載します。
BEM るとどういう良いことがあるの？
いろんな人がすでに書いているので別エントリを参考になさってください。あるいは、今回の Advent Calendar に参加した方のエントリも参考になるかと思います。
- Sass と BEM - Weblog - Hail2u.net
- BEM という命名規則と Sass 3.3 の新しい記法 - アインシュタインの電話番号
- BEM によるフロントエンドの設計 - 基本概念とルール | CodeGrid（有料記事）
なんとか 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 の取り方です。すんなり書けるのは２階層までで、３階層になると迷いが出ます。Block を入れ子にしていくのか、Element をつないでいくのか、やるなら統一しなければ BEM 道ではない（部分的にルールが変わると厳格さが失われ、メンテナブルとは言えない）ですね。あるいは Element-block というような「内包ブロック」なものをつないで、結果 .Block__Element-block2__Element2-block3__Element3--Modifier のようなセレクタを受け入れるのか......。
BEM 道を進むために必要なたった１つのこと
「スタイルを管理しようとすると発狂するので、DOM ツリーを説明することだけ考えること」
２日目はげこたんさんですがすでに書いてました！