Permalink
Fetching contributors…
Cannot retrieve contributors at this time
90 lines (62 sloc) 4.63 KB
layout page_type page_datetime page_id page_title page_tag page_description
./src/jade/_post.jade
post
2013-12-09T21:56:00
39
ブログを初めてBEM化した時の流れの最後
Advent Calendar
BEM
CSS
HTML
BEM神の声完結編

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

前回のおさらい

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

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日目はげこたんさん(2日ぶり4度目)です。よろしくお願いします。