BEM Advent Calendar 2013の7日目です。

昨夜会社で同僚たちと飲んでいたときにBEM Advent Calendar 2013を見てみたらたまたま今日が空いているのを見つけてしまいました。
お酒の力もかりてノープランで登録してしまったことを反省しております。
BEM Advent Calendar 2013を見ているようなマニアックな皆さまであれば、この記事を読むことで得るものは何もないと思われます。

ウダウダと書いておりましたら、結論はステマですみたいなエントリーが完成いたしました。
読んでから時間を無駄にしたなと思う前にそっとブラウザバックすることを強くオススメいたします。

ブロック内は全部エレメントにするの？

BEM Advent Calendar 2013初日、CSSの命名規則にBEMを取り入れてみる | dskdで越智さんは以下のようにおっしゃっています。

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

たしかにこの当たりムズイんですよね。
もー3階層目とか4階層目とかになってくるとBEMの規則に従わずに普通に class 書けば良いんじゃねーの？と思うことが多々あります。
で、今日何書こうかなーとBEM関連のもろもろに目を通しておりましたら、MindBEMding（日本語訳）に以下のようなサンプルがありました。

<div class="media">
    <img src="logo.png" alt="Foo Corp logo" class="media__img--rev">
    <div class="media__body">
        <h3 class="alpha">Welcome to Foo Corp</h3>
        <p class="lede">Foo Corp is the best, seriously!</p>
    </div>
</div>

あれ、こういうのも全然OKなの？
h3.alphaであればh3.media__alphaにするんじゃなかろうかと思ったりしました。

この辺の厳格さとゆるさのせめぎあいが我々マークアッパーを悩ませる一因でもありますよね。
全て厳格にBEMのルールに従えっていうのは簡単なんですが、マジでーっていう場面って結構ありますし、ゆるくしたらそれはそれで後々に思いいたらなかったエレメントが出てきたりして破綻への一歩を踏み出すことなんかも結構あります。
んー、どなたか偉い方がこの辺をスマートに解決してくれないかなーと思っております。

そういえば、現在CodeGridにおいてBEMの連載がはじまっていましたね。
何回までシリーズが続くのか分かりませんが、BEMに深く突っ込んで我々の悩みを一掃していただけるのを期待しております。
皆さんもこの機会にCodeGridを購読してみてはいかがでしょうか。

BEM Advent Calendar 2013、8日目はGeckoTangさんです。