BootstrapをBEMに考えてみる - Blog.おにぎりたまごうぃんなー

この記事はBEM Advent Calendar 2013の22日目の記事です。

こちらの記事を読んで、初めてBEMを知りました。
BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号
ほー。そのうち調べてみよう。と思ってても人間必要に迫られないとやりません！
Advent Calendarに参加することでやらなきゃいけない理由をつくるライフハック。
とりあえずよく使っているBootstrapをBEMで記述するとどうなるかを考えてみました。

よくあるあるヘッダーでBEMる

Components - Navbar / Bootstrap
f:id:s12bt:20131222210113p:plain

bootstrapのコードはこう

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Brand</a>
  </div>

  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>
</nav>

Blockはどれか

これをBEMに書き換えてみるよ！

Block - 構成のルートとなる要素。すべてはここから始まると言っても過言ではない。
Element - Blockに所属する子要素。必ずBlockの中にいて単体では生きられない。
Modifier - 元となるBlockまたはElementから変化した状態を表す要素。
BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号

headerコンポーネントのnavbarと、左側のメニュー類を構成するnavコンポーネントのnav、その中のドロップダウンメニューのdropdownだろう。
1つのパーツの中で3つのブロックが存在している。

Block以下のものを、ElementとModifierを振り分けながらBEMで書く

MindBEMdingは、そのBEMをCSSのクラス名に適用するために作られた規則で、CSS界隈でBEMと言った場合はこのMindBEMdingを指すことが多い。Elementをアンダースコア2つ(__)、Modifierをハイフン2つ(--)で連結することでBEMの各要素を表現する。
BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号

Bootstrap	BEM	メモ
navbar	navbar	Block
navbar-default	navbar--default	Modifier
navbar-header	navbar__header	Element
navbar-brand	navbar__brand	Element
nav	nav	Block
navbar-nav	navbar__nav	Element
active	nav--active	Modifier, navの中の状態を表すもの
dropdown	droppdown	Block
dropdown-toggle	dropdown--toggle	Modifier?
caret	dropdown--caret	Element? Modifier? うーん。上のtoggleがModifierならModifierな気がする
dropdown-menu	dropdown__menu	Element
divider	dropdown__menu__divider	dropdown__menuの中でしか使わない区切り線なので、menuの下にいれてみた。

結果

<nav class="navbar navbar--default" role="navigation">
  <div class="navbar__header">
    <a class="navbar__brand" href="#">Brand</a>
  </div>

  <ul class="nav navbar__nav">
    <li class="nav--active"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown--toggle " data-toggle="dropdown">Dropdown <b class="dropdown--caret"></b></a>
      <ul class="dropdown__menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="dropdown__menu__divider"></li>
        <li><a href="#">Separated link</a></li>
        <li class="dropdown__menu__divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>
</nav>

コンポーネントがどう構成されているか見渡しやすくなった気がする

Bootstrapのドキュメント読んでると、サンプルコードで、コンポーネントとコンポーネントの関係がわかりずらい時がある(今回みたいに、navとnavbarとか)。
そういうときにBEMで書かれてると、activeっていうのはnavコンポーネントの要素だよっていうのがhtmlだけで一目でわかるからいいのかもしれない。
CSS見たら、BEMすごい気持ち悪いなと思ったけど、HTMLに起こすと、CSSの断片から構造が見えていいなと思ってる。

っていうか、結果がすごく間違ってる気がする。BEMこれであってるのかなー。
bem-methodology-ja/definitions.md at master · juno/bem-methodology-ja · GitHubを読むと、CSSプリプロセッサで書くときに、色々楽になりそうな感じがする。

理解がまだまだ浅いので、BEM Advent Calendar 2013の他の方の記事読み込んで勉強します。