Blog.おにぎりたまごうぃんなー

Suzuki Yuki@s12bt おべんと箱みたいに色々つめこみたい。仕事とかデザインとか料理とか好きなもののことを書きます。

BootstrapをBEMに考えてみる

この記事は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の他の方の記事読み込んで勉強します。

広告を非表示にする