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

公開日: 2013-12-09
タグ: Advent Calendar; BEM; CSS; HTML

BEM Advent Calendar 2013 ９日目のエントリです。前回の記事の続きです。

前回のおさらい

インデックスについて、ヘッダー以外の Block を BEM りました。

ヘッダーはさくっとこんな感じです。

<header class="header">
  <h1 class="header__logo"><a href="">dskd</a></h1>
</header>

特に説明はいらないと思いますが、インデックスのロゴとなる部分にホームへのリンクはいるのかという BEM とは関係ない問題はあります。僕はつける派なのでつけました。SEO について考えたことはありません。

インデックスとそれ以外では <header> に入れている文言が違うので、それぞれに Modifier をつけています。

<!-- 全アーカイブ -->
<header class="header header--archives">...</header>

<!-- カテゴリー -->
<header class="header header--category">...</header>

<!-- 月別 -->
<header class="header header--monthly">...</header>

<!-- 個別 -->
<header class="header header--individual">...</header>

ですが、今のところデザインに反映されていないのでつける意味がない気がします。

インデックス以外のページの Block

dskd.jp にはインデックスの他に全アーカイブ一覧、カテゴリーアーカイブ、月別アーカイブ、個別記事ページがあり、個別記事ページ以外はほぼインデックスと同じです。

ヘッダー
記事リスト
アーカイブス
カテゴリー
コピーライト

個別記事ページも特筆すべき Block はありません。

ヘッダー
記事リスト
１つ前の記事
アーカイブス
カテゴリー
コピーライト

「１つ前の記事」は前回エントリでも触れた neighbor Block として以下のようにしています。

<nav class="neighbor layout--horizon">
  <div class="neighbor-header layout--horizon__item">
    <h2 class="neighbor-header__item">Older</h2>
  </div>
  <a class="neighbor__item layout--horizon__item" href="#">記事見出し</a>
</nav>

カテゴリーはページャースタイルだったため neighbor > neighbor-pager > neighbor-pager__item という構造でしたが、１つ前の記事 Block では直接の子 Element として neighbor__item にしてみました。

......。とまぁこんな具合に BEM 化は一応終わりました。搾りかすのような記事ですみません。BEM 化したインデックスの <body> 内のソースはインデックスがこちら、個別記事ページがこちらです。

終えた感想については初回の BEM Advent Calendar の記事で書いている通り「難しかったー」というものなんですけど、dskd.jp がシングルカラムでなかったらもっと苦労したように思います。振り返って繰り返し認識するのが、階層が深くなった時に Block と Element をどうつないでいくのかの判断がとても難しい、ということです。どんなに深い構造でも完璧に BEM れる強さ、持ちたいですね。

そう言えば今日、こんなツイートをしました。

小規模 BEM しかやってないので BEM の機微を語ることができない— 越智 (@o_ti) 2013, 12月 9

僕の力不足であまり役に立たない記事を量産してしまいました！　 BEMer への道は険しい！　 TKG が食べたい！

10 日目はげこたんさん（２日ぶり４度目）です。よろしくお願いします。