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

BEM Advent Calendar 2013 4日目のエントリです。前回の記事があまり BEM れてないという BEM 神の声を聞いたので、当ブログを BEM 化した時の流れを書いていきます。

まずはデザインを決めないとねということで、シングルカラムを継承しつつ、以前より色を明るくしてコントラストも抑えてみました。カラースキームなどは深く考えていないので:visitedにピンク系とか:hoverに黄緑とか唐突に出てきます。センスなくてつらい。

Block を決める

デザインを決めたあと、まず BEM における Block となるエリアを考えます。

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

デザインはシングルカラムのスタック構造なのでここは簡単でした。dskd.jp は検索フォームやメニューなんていう便利なものはないです。一般的なサイトですと、

  • 検索フォーム
  • メニュー
  • サブメニュー
  • 左カラム
  • 右ラム
  • ソーシャルツール
  • レコメンド
  • ランキング
  • フィードバック
  • 広告
  • フッター

などいろいろな Block が考えられます。いずれにしてもトップレベル Block を作るだけならさほど難しくありません。この時点では「BEM 余裕じゃね?」て思っていたのですがそんなに甘くはありませんでした。

Element を決める

Block の次は Element です。

  • ヘッダー
    • ロゴ
  • 記事リスト
    • 記事
      • タイトル
      • 日付
      • カテゴリ
  • ページャー
    • ラベル
    • ページリスト
    • ページリンク
  • カテゴリー
    • ラベル
    • カテゴリーリスト
      • カテゴリーリンク
  • オーサー
    • ラベル
    • 名前
    • メアド
    • アカウントリスト
      • アカウントリンク
  • コピーライト
    • ラベル
    • 記載

普通ですね。一旦、クラス名を考えて行きます。

  • ヘッダー:header
    • ロゴ:header__logo
  • 記事リスト:article
    • 記事:article__item
      • タイトル:article__item__title
      • 日付:article__item__pubtime
      • カテゴリ:article__item__category
  • ページャー:pager
    • ラベル:pager__head
    • ページリスト:pager__list
      • ページリンク:pager__list__item
  • カテゴリー:category
    • ラベル:category__head
    • カテゴリーリスト:category__list
      • カテゴリーリンク:category__list__item
  • オーサー:author
    • ラベル:author__head
    • 名前:author__name
    • メアド:author__mail
    • アカウントリスト:author__account
      • アカウントリンク:author__account__item
  • コピーライト:credit
    • ラベル:credit__head
    • 記載:credit__item

とりあえずクラスを振り終えたましたが、階層を2つ潜った時に BlockElementElement となっているのがムズムズします。しかし歯ぎしりするにはまだ早い。次はマークアップへ移りましょう。

とりあえずマークアップでデザインを完成させる。

デザインを反映させて<body>内をクラスなしでマークアップしたものはこちらです。

前述で準備しておいた Element とは構造がかなり違いますね。デザインの制約もあるので当たり前ですね。コンテンツ構造だけでは BEM れないのが BEM の歯ぎしりポイントでもあります。特に記事リストではセマンティック要素を多用しているせいもあり、カテゴリーリンクは6階層も潜ってしまっています。

記事リスト Block を抜粋してみます。

<div>
  <article>
    <header>
      <h2>記事見出し</a></h2>
    </header>
    <footer>
      <time>0000/00/00<br>00:00</time>
      <dl>
        <dt>category :</dt>
        <dd>
          <a href="">cate name</a>, <a href="">cate name</a>
        </dd>
      </dl>
    </footer>
  </article>
  :
  :
</div>

これら全てを 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>

<header><footer>.article-header,.article-footerとしました。BlockElementElement をやめ、Block > Block__Element のように Element の上は必ず Block とするようにしました。

このようなルールを適応してもいいのか、少し疑問が残っています。というのも、.article-header__itemだけ抜き出した時、.article-headerという親要素と子要素である__itemがあることは説明できますが、.article-headerの親に.articleがあるかどうかは説明できないように思うからです。しかし、.article内の Block は.article-だよという接頭句を作ったと見れば、少なくともそのマークアップ構造が守られている間は BEM 道を歩いていると言えるのではないでしょうか。試しにクラス名だけ抜き出してみます。

.article
.article__item
.article-header
.article-header__item
.article-footer
.article-footer__pubtime
.article-footer__categories
.article-footer__categories-title
.article-footer__categories-item

そんなに悪い感じはしないように思います。長くなってしまったので続きは明後日に!


5日目はげこたんさん(2日ぶり2度目)です。よろしくお願いします。