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

公開日

2013-12-06

タグ

Advent Calendar

BEM

CSS

HTML

BEM Advent Calendar 2013 ６日目のエントリです。前回の記事に引き続き、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-header と archives-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-header と neighbor-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 なスタイルは登場しています。

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

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

７日目は５日ぶり２日目、まぼろしの小林さんです。よろしくお願いします。