BEMまとめ奴

BEM Advent Calendar 2013 最終日のエントリです。

BEM Advent Calendar 2013に参加していただいた皆さんお疲れ様でした。そしてありがとうございました。

リニューアルしたAdventarで最初にカレンダーを登録した時にボックスのヘッダーカラーがアレな黄土色だった時はどうしてくれようかと思いましたし、開始4日前で18枠も開いていたりとか、TLではBEMへの闇が広がっていたりとかもしていましたが、なんとか25日埋めることができました。カレンダーに参加していない方にもBEMの記事を書いていただいたりと、せまい範囲ながらBEMに触れる機会を提供できたのかなと思えています。

最終日25日目の本記事では、BEM Advent Calendar 2013に寄せていただいた記事だけでなく他のBEMな記事もあわせたまとめを公開させていただきます。「で、出た~w最終日にまとめ記事公開奴~www」です。

まずは本家とその周辺から

BEM公式サイトです。Yandexというロシアの検索サイトで用いられている方法を改定した命名規則がまとめられています。

左メニューからMethodology > Definitionsと進むとBEMの定義が書かれています。ここを読めばMindBEMdingはすぐに得られると思います。定義の説明だけでなく、XMLやJSONでBEM管理するためのフォーマットなども載っています。また、Filesystemのページではリソースファイルの名前にもBEMを用いて管理する方法が紹介されています。ビルド時に結合するファイルもBEMな名前管理にすることで保守性をあげようという狙いがあるようです。

Smashing MagazineにもBEMの主要な定義とサンプルを一つ一つ紹介している記事が連載されていました。

スライドもあります。

日本語で読みたい方はこちらにIndexとDefinitionsの日本語訳があります。

GitHubで公開されているのでBEM神の声をもっと聞きたい方はcloneしてどうこうするといいと思います。

Let's MindBEMding!

続いて日本の記事です。

上記記事ではMindBEMdingでCSSを書くにあたっての多数のサンプル、SMACSSからBEMへの移行、プリプロセッサーの強力な拡張機能を用いた管理方法、変数名をBEMることで使われる先や影響範囲の見通しを良くしようという提案などが紹介されています。プリプロセッサーをお使いでない方には興味が薄いかもしれませんが、サイトをBEM化しておくのは開発支援ツール的にも良いということです。MindBEMdingでセレクタにBlock名が子要素へ継承されていくことを利用して、BlockとElementのスタイルの結合性をより明確にできるのは大きなメリットです。僕はBEM自体にはサイトをスタイルする(デザインカンプからHTMLに起こす)にあたってアドバンテージはほとんどないと考えているのですが、冗長な名前付けに対する十分な対価はプリプロセッサーが与えてくれると思いました。

僕が観測した範囲なのでMindBEMdingな記事はもっとあると思います。まとめに追加するかはわかりませんが、他に記事があったら @o_tiまで教えていただけると幸いです。

BEMリプレイス記事

既存のウェブサイトをBEMリプレイスするにあたって頭を抱えることと言えば、直感的なBEMツリーと現実のDOMツリーとのギャップです。アイコンなどの装飾のために空要素や多重div, spanでHTMLが組まれているとBEMツリーを構築するのは大変な作業となります。とはいえBEMはチームで共有するものですから、チーム内で仕様についてコンセンサスがとれていればどんなBlockやElementが構築されても良いと思います。ルートBlockと子ElementのみをBEM管理にするような易しめな方法もアリです。サイトのグリッドレイアウトに関するものだけとか、更新が激しいパーツだけとか。

ただ僕としてはサイトの一部だけBEMるなら最初から全部BEMってしまった方が後で楽をできると思います。BEMツリーのイニシャライズはとても労力がかかりますが、全てをBEMリプレイスできるとそのサイトの全容がガッツリと把握できること請け合い、次第にBEM神の声も聞こえてくるのでオススメです。

世の中を円滑にBEMるためのTIPS

BEMに限らずOOCSSでもセレクタの名前付けには頭を抱える時間が少なくありません。BEMではさらにBlockとElementの区別や、アンダースコア2つ、ハイフン2つ(Yandexではアンダースコア1つ)といったデリミタの見た目に対する嫌悪感から、やっていく内に「BEM道なんてなかった!」とか「Elementはみんなの心のなかにあるんだよ......。」などと言いたくなることも多いです。そういったお悩みを解決するのが上記記事のTIPSです。

その名の通りBEMのキモはBlock, Element, Modifierの3つでHTMLを説明し管理することです。それができていればデリミタやケースは管理者が必要に応じてコントロールしていいと思います。特に小山田さんの記事ではサイトリニューアルで生まれがちなバージョン違いのパーツの混在を、Blockに接頭辞をつけることで共存させるアイデアが紹介されています。単純な操作ですが、バージョンをModifier管理に混ぜるよりはるかにメンテナンス性がありますね。小林さんが紹介しているEmmet BEMフィルターも煩わしい継承の記述を最小限に抑えてくれるのでいい感じです。

Multilayer CSS

こちらはMCSSというCSSの管理方法を日本語訳した記事です。MCSSではまず最も再利用可能で抽象的な構造に着目します。それを「ベース」レイヤーとします。次にその再利用可能なパーツがどんな場所に格納されているかを見ます。ベースを格納しているものを「プロジェクト」レイヤーと呼びます。再利用可能なパーツ内の子要素に、MindBEMdingな名前付けをしています。また、MCSSは「コスメティック」と呼ばれるレイヤーでOOCSSな名前付けでもって状態の差異を表現するようです。詳しい内容な上記記事をどうぞ。

強調しておきたいのは、BEMとMCSS を比べてBlock = ベース、Element = プロジェクト、Modifier = コスメティック なんてことは全くない、ということです。MCSSとBEMはある程度共存できます。ベースとプロジェクト、それぞれにBEMツリーを構築できます。Blockを継承しすぎて冗長になったBEMツリーは、MCSSによって少し見通しがよくなる可能性があります。本家のブログで BEMからMCSSに移行するサンプルコードが書かれています。Modifierの指定方法が異なるので興味のある方はぜひ御覧ください。

BEM Tools

bem.infoで提供されているBEM Toolsを試して一つ一つ紹介されています。貴重な日本語ソースですね。他にもBEM Toolsを紹介している日本のブログはありましたが、げこたんさんの方が入力ソースと出力ソースの両方を書いているので良いと思います。ツールと言ってもGUIを持ったソフトウェアではなく、コマンドラインから操作するタイプのツールです。使用にはNode.jsが必要です。Gruntを使われている方ならインストールまでは何ら苦はないと思いますので、ぜひ試してみてはいかかでしょうか。

僕としては定義ファイルのJSONが手編集というのが闇が広がりそうだなーと思うところです。BlockやElementをあらかじめ精査して仕様を決定し、その上で一気に初期ファイルをビルドするなどの用途には良いかもしれません。

結局BEMって

HTMLとCSSについてのBEMでは、フロントエンドの開発手法がフレームワークやプリプロセッサー、ポストプロセッサーの台頭により多様化している昨今、PureなBEM道を突き進むのは「今風ではない」のかもしれません。僕はこの小さなブログをBEM化した程度の経験しかないので、厳格なBEMで起こした大規模なサイトというのはYandexくらいしか見たことがないですし、BEM化することで実際にどれくらいメンテナンス性や拡張性が上がったのか具体的に説明しているページを知りませんから、BEM Advent Calendar を立ち上げておきながらBEMることの本当の恩恵を実感したことがない体たらくです。

何かが良くなったり楽になったりしないと人はなかなか道具を変えません。BEMは全てをいい感じにする魔法の方法論ではありませんから、Pure BEMからMindBEMdingへ少しルールを崩していけば、OOCSSとの親和性やフレームワークとの連携など少しとっつきやすさが出てくるので、現在取り入れている方法論にうまく混ぜていってBEMの美味しいところだけを啜っていく世の中になるのかもしれないなぁと思います。ただMindBEMdingも混ぜ方を間違えるとただ読みづらくて使いづらいだけになってしまうので、ベターBEM、ベストMindBEMdingなプラクティスがもっと必要だなと思う次第です。

おわりに

二ヶ月ほどの間BEMのことばかり考えていました。最初にdskd.jpをBEM化した時には見えなかったことが、BEM Advent Calendarが更新される度に見えるようになってとても勉強になりました。BEMについて記事を書いたりやTwitterなどで言及していただいた方々、改めて本当にありがとうございました。


P.S なんとかこれをやらずに済みました。

元ネタはこちら