ブログを初めて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>© 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日目、まぼろしの 小林さんです。よろしくお願いします。