Permalink
Fetching contributors…
Cannot retrieve contributors at this time
173 lines (145 sloc) 6.93 KB
layout page_type page_datetime page_id page_title page_tag page_description
./src/jade/_post.jade
post
2013-12-04T09:54:00
36
ブログを初めてBEM化した時の流れ
Advent Calendar
BEM
CSS
HTML
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つ潜った時に Block__Element__Element となっているのがムズムズします。しかし歯ぎしりするにはまだ早い。次はマークアップへ移りましょう。

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

デザインを反映させて<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>

&lt;header&gt;&lt;footer&gt;.article-header,.article-footerとしました。Block__Element__Elementをやめ、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度目)です。よろしくお願いします。