ブログを初めてBEM化した時の流れ
- 公開日
- タグ
- Advent Calendar
- BEM
- CSS
- HTML
BEM Advent Calendar 2013 ４日目のエントリです。前回の記事があまり 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
- ラベル：
とりあえずクラスを振り終えたましたが、階層を２つ潜った時に BlockElementElement となっているのがムズムズします。しかし歯ぎしりするにはまだ早い。次はマークアップへ移りましょう。
とりあえずマークアップでデザインを完成させる。
デザインを反映させて <body> 内をクラスなしでマークアップしたものはこちらです。
前述で準備しておいた Element とは構造がかなり違いますね。デザインの制約もあるので当たり前ですね。コンテンツ構造だけでは BEM れないのが BEM の歯ぎしりポイントでもあります。特に記事リストではセマンティック要素を多用しているせいもあり、カテゴリーリンクは６階層も潜ってしまっています。
記事リスト 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
そんなに悪い感じはしないように思います。長くなってしまったので続きは明後日に！
５日目はげこたんさん（２日ぶり２度目）です。よろしくお願いします。