BEM 化されたブログをのぞかせてもらう

@o_ti さんのブログの、 http://dskd.jp/archives/36.html をみてみた。

以下のようになっていた:

.contents
  .header
    h1.header__logo
  .article
    article.article__item
      header.article-header
        h1.article-header__item
      footer.article-footer
        time.article-footer__pubtime
        dl.article-footer__categories
          dt.article-footer__categories-title
          dd.article-footer__categories-item
      p
      h2
      ul
      ...
  nav.neighbor
    .neighbor-header
      h2.neighbor-header__item
    a.neighbor__item
  section.archives
    header.archives-header
      h2.archives-header__item
    nav.archives-year
      h2.archives-year__title
      ul.archives-year__monthly
        li.archives-year__item
        ...
  section.neighbor
    .neighbor-header
      h2.neighbor-header__item
      ol.neighbor-pager
        li.neighbor-pager__item
          a.button
        ...
  footer.credit
    .credit-header
      h2.credit-header__item
    p.credit__item
      small

思ったこと

CSSの命名規則にBEMを取り入れてみる | dskd から引用:

前述した通り、BEM で難しいのは Element の取り方です。すんなり書けるのは２階層までで、３階層になると迷いが出ます。Block を入れ子にしていくのか、Element をつないでいくのか、やるなら統一しなければ BEM 道ではない（部分的にルールが変わると厳格さが失われ、メンテナブルとは言えない）ですね。 Element-block というような「内包ブロック」なものをつないで、結果 .Block__Element-block2__Element2-block3__Element3--Modifier のようなセレクタを受け入れるのか......。

ブログを初めて BEM 化した時の流れ | dskd から引用:

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

.article__item の子の header も Block の構成要素にあたる Element として article__item__header という Element_Element_Element と位置づけるか、 article__item-header という Block__Element-Block というような「内包ブロック」として位置づけるか、それか article-header として Element-Block とするか... ナニコレ難しい。
僕が書いてたら article__item-header ってして、内包ブロックの型を選んだろうと思う。ただ、内包ブロックって Block__Element-Block みたいな型だとハイフンが単なる単語の連結か Block の連結かわかりにくいな。

.article__item Block の子の要素は Element に当たると思うけど、 p や ul にはクラスを振っておらず、 .article__item p とか .article__item ul って形でスタイルを当てている。
ここも僕が書くならって考えてみると、 .article__item-sentence とか .article__item-lists とかにしてたかも。

「自分で書いてたらこうしてたかも」という箇所は上記のようにあるにはあるんだけど、実際にブログなどのページ・サイト作成を行ってみないとわからないところが多そう。

上記にも出てきているけど、このブログには「ブログを BEM 化した時の流れ」が書かれている記事が幾つか投稿されているので、これらも参考になりそう:

最後に

CSSの命名規則にBEMを取り入れてみる | dskd から引用:

ブログのリニューアルに合わせて BEM な CSS を書きました。書いたけど、難しかったです。構造が深くなった時、Block はどこまで保持するのか、Element にするのかしないのか、マルチクラスはどこまで許容するのか......。

このブログを初めて見た時、この文章の意味がつかめなかったんだけど、今ならちょっとわかる。
僕は基本的にどのプロジェクトもマルチクラスで CSS を書いていて、BEM を使い出すとそれができなくなるわけじゃないけど、今まで普通にマルチクラスを使っていた所でシングルクラスとどっちを取るか悩む所はありそう。

http://dskd.jp/ も今度参考に見させてもらおう。

CHROMA

世の中の "当たり前" を確認する

BEM 化されたブログをのぞかせてもらう

思ったこと

最後に