ブログを初めてBEM化した時の流れの続き

BEM Advent Calendar 2013 6日目のエントリです。前回の記事に引き続き、BEM 道をがんばって進みたいと思います。

前回のおさらい

記事リスト Block をこんな感じに BEM りました。

<div class="article">
  <article class="article__item">
    <header class="article-header">
      <h2 class="article-header__item">記事見出し</a></h2>
    </header>
    <footer class="article-footer">
      <time class="article-footer__pubtime">0000/00/00<br>00:00</time>
      <dl class="article-footer__categories">
        <dt class="article-footer__categories-title">category :</dt>
        <dd class="article-footer__categories-item">
          <a href="">cate name</a>, <a href="">cate name</a>
        </dd>
      </dl>
    </footer>
  </article>
  :
  略
</div>

BEM 化前のクラスなしマークアップはこちらです。

  • ヘッダー
  • 記事リスト
  • ページャー
  • アーカイブス
  • カテゴリー
  • オーサー
  • コピーライト

さて、どんどん進んで行きましょう。

アーカイブス Block

ページャーとカテゴリーは後述します。

<section class="archives layout--horizon">
  <header class="archives-header layout--horizon__item">
    <h2 class="archives-header__item">Archives</h2>
  </header>

  <nav class="archives-year layout--horizon__item">
    <h2 class="archives-year__title">2012</h2>
    <ul class="archives-year__monthly">
      <li class="archives-year__item"><a href="">Monthly</a></li>
      <li class="archives-year__item"><a href="">Monthly</a></li>
      <li class="archives-year__item"><a href="">Monthly</a></li>
    </ul>
  </nav>
  :
  略
  :
</section>

記事リスト同様、archives-接頭句を設けてarchives内にarchives-headerarchives-year Block を定義します。Element は適当に。ここでlayout--horizonという Block ができていますが、これについては後述します。

オーサー、コピーライト Block

<section class="author layout--horizon">
  <header class="author-header layout--horizon__item">
    <h2 class="author-header__item">Author</h2>
  </header>
  <p class="author__name layout--horizon__item">越智</p>
  <address class="author__address layout--horizon__item"><a href="mailto:otiext@gmail.com">otiext@gmail.com</a></address>
  <ul class="author-accounts layout--horizon__item">
    <li class="author-accounts__item"><a href="http://twitter.com/o_ti">Twitter</a></li>
    <li class="author-accounts__item"><a href="http://jsdo.it/o_ti">Jsdo.it</a></li>
    <li class="author-accounts__item"><a href="http://facebook.com/otiext">Facebook</a></li>
  </ul>
</section>

<footer class="credit layout--horizon">
  <div class="credit-header layout--horizon__item">
    <h2 class="credit-header__item">Copyright</h2>
  </div>
  <p class="credit__item layout--horizon__item">
    <small>&copy; dskd/oti All Rights Reserved.</small>
  </p>
</footer>

ここでもauthor-接頭句を使ってauthor-accounts Block を定義しています。

カテゴリー Block

<section class="neighbor layout--horizon">
  <header class="neighbor-header layout--horizon__item">
    <h2 class="neighbor-header__item">Categories</h2>
  </header>
  <ol class="neighbor-pager layout--horizon__item">
    <li class="neighbor-pager__item"><a class="button" href="">Category</a></li>
    <li class="neighbor-pager__item"><a class="button" href="">Category</a></li>
    <li class="neighbor-pager__item"><a class="button" href="">Category</a></li>
  </ol>
</section>

カテゴリーの Block 名はneighborとしています。「隣人」という意味ですね。インデックスの隣にカテゴリー?と思われるかもしれませんが、記事リストを内包するリンク集同士は隣の人っぽい感じがするのでそうしてます。僕がそう思うんでそうです。僕の中では。

ここでもneighbor-接頭句でneighbor-headerneighbor-pagerを定義しています。

ページャー Block

<nav class="neighbor layout--horizon">
  <div class="neighbor-header layout--horizon__item">
    <h2 class="neighbor-header__item">Pager</h2>
  </div>
  <ol class="neighbor-pager layout--horizon__item">
    <li class="neighbor-pager__item"><span class="button button--disable">1</span></li>
    <li class="neighbor-pager__item"><a class="button" href="">2</a></li>
    <li class="neighbor-pager__item"><a class="button" href="">3</a></li>
  </ol>
</nav>

あと回しにしていたページャーです。<h2><div>で挟んでいます。<div>がない場合、

<nav class="neighbor layout--horizon">
  <h2 class="neighbor__header">Pager</h2>
  <ol class="neighbor-pager layout--horizon__item">
    略
  </ol>
</nav>

という具合になるかと思います。BEM としては全然かまわないのですが、レイアウトの都合上layout--horizon__itemの中に*-header__itemという構造が欲しかったので<div>をつけました。先のアーカイブスとカテゴリーとオーサーが<h2><header>に入れているので、Element の階層に互換性を持たせるため、といういうことで。

layout--horizon Block について

これは「ラベルが左、コンテンツが右」の水平レイアウトという Block です(horizon を Modifier にしているのは、もしかしたら今後--tableとか--stackとか作るかもしれないと思ったからなのですが、たぶんないです)。他の Block がコンテンツやドキュメント上のセマンティクスにそって命名されている「文脈準拠 BEM」に対し、layout はデザイン準拠な BEM」です。このようなものを作るのは BEM 道に反していると言われそうですが、何に準拠していようと命名が BEM method で管理されているかぎり BEM が目指すメンテナンス性からそう外れはしないだろうと思っています。

また、buttonという Block があります。名前の通りボタンなスタイルが適応されています。ここがneighbor Block を継承していないのはbuttonがサイトに点在する可能性を鑑みた結果です。実際にページャーとカテゴリーだけでなく、個別記事ページのリンクにもbuttonなスタイルは登場しています。

layoutbuttonは、いうなればコンテンツに依存しないスタイルの管理を簡易化するための Block です。dskd.jp にはデザイン要素はとても少ないですが、大規模なサイトや UI 重視のコンテンツになるとどの Block や Element の中に現れても変わらない CSS ルールセットがもっと出てくると思います。タブ、リストマークの画像、背景のパターン、テキストの装飾などです。こういったものは BEM では Modifier に吸収されてしまうところですが、テーマカラーやレギュレーションを微調整する必要が出た際、この「デザイン準拠な BEM」も有効なのではないかと思います。

今回も長くなってしまったので次回に続きます。次はインデックス以外のページについてです。


7日目は5日ぶり2日目、まぼろしの小林さんです。よろしくお願いします。