SassとBEM

SCSSファイルを整理し直している時、一気にBEMなクラスを使って書きなおしてやろうかとも考えていた。けど途中でSassならSCSSファイルの分割とその中での工夫によってBEMの構造を表現できそうと感じたので、今はそういう方向で試行錯誤している。実際BEMのウェブサイトでもファイルシステムを使ったBEMの表現方法という似た話が書かれているので荒唐無稽な考えではなさそう。

イメージはこのような感じ。HTMLでのマークアップの簡潔さは維持できるが、CSSでのセレクターが複雑になりがち。そのためCSSのカスケーディングを意識しなくて良くなるという実用的なメリットがなくなったり、HTMLからCSSへの見通しが慣れるまで大変だったりする。それ以外は大体SassのメリットとBEMのメリットを満喫できそうではあるけれども、生産性の向上は見込めない。

最後の既存マークアップの利用をBEMなクラスに差し替えるとわかりやすくなるし、BEMらしい感じになるけど、それだと同じ意味を持つ表現(ファイル名でのブロックの表現とBEMなクラスでのブロックの表現)が重複することになるので無駄が多すぎる気がする。

Sass 3.3の予定のひとつには&のインターポレーションの拡張があり(3.2の予定から延期された)、BEMなクラス名の生成しやすくなるようだ。SassとBEMということなら、それを利用してBEMべったりにした方がSassのコード的にもCSSのコード的にも、HTMLのマークアップの安定性という点でもバランス良くベターになりそう。インターポレーションが多いと、SassのコードをCSSの視点で見た場合にわけのわからない感じになるのであんまり好きではないんだけど。

いずれにせよSassのネストとBEMの強力な命名規則のどちらをメインに据えるかというのが焦点になりそう。Sassべったりだった身としてはネストを捨てるのはためらいがあるけど、BEMなクラス名でその代替的なことが出来る今ならSassをcalc()とかexpression()のすごい奴みたいに割り切ってしまっても良い気もする。複雑になりすぎてついていけないからとかではなくて、一旦Sassのどの機能をどうやって使うべきなのかをちゃんと整理するべき時期に来たと思うので。

また、BEMはちょっと変わってるけど単なる命名規則にすぎないと言って煙に巻けそうなので、わりと早くに広まりそうだと考えているのもある。シンプルだけど強力な命名規則のおかげでStyle Guideの類いがとても書きやすくなるのは大きい。ハイフンやアンダースコアを2つ並べるのはなかなか気持ち悪いと感じる人も多そうだけど、そこに明確な規則性と明るい未来が見いだせれば乗り越えられるはず。

ブロック！　エレメント！　モディフィアー！　……マダファイアー？