BEM Advent Calendar 2013の3日目です。

BEM、良さげだけどHTML書くのが面倒になるじゃん、class長いし、多いし。などと思ってBEMを敬遠されている方がいらっしゃったらEmmetのBEMフィルターを利用すれば良いと思います。

Emmetって？

Zen-Codingをさらにすごくしたやつです。以下あたりが分かりやすいと思います。
Zen-Codingの次期バージョン、Emmet について｜Web Design KOJIKA17

EmmetのBEMフィルターを使ってサクッとHTMLを書いてみる

BEMろうかなと思ってはみたものの、いざやってみると毎回「ブロック名-エレメント名」なんてclassを書いてらんねーよとなって途中で投げ出してしまうということがあります。僕は結構あります。
まぁ、それでもBEM + 自分ルールの良い感じの HTML / CSS にはなるのですが、いざやるからにはちゃんとBEMっておいた方がプロっぽさがにじみ出た HTML / CSS になって良い感じです。

例えば以下のようなHTMLを書くとしましょう。

<div class="items items_wide">
	<div class="items__item">
		<div class="items__image"></div>
		<div class="items__overview">
			<h2 class="items__name"></h2>
			<p class="items__price"></p>
			<p class="items__comment"></p>
		</div>
	</div>
</div>

手書きでこういうのを毎回作るとなると結構つらいのですが、EmmetのBEMフィルターを利用するとそこまでつらくもありません。
上記HTMLを書く場合には以下のようにEmmet記法で書いてHTMLを展開するだけでOKです。

.items_wide>.-item>.-image+.-overview>h2.-name+p.-price+p.-comment|bem

これを見ていただければだいたいどういうことか分かると思いますが、EmmetのBEMフィルターのポイントとしては以下の3点くらいでしょう。

• モディファイアを書けば当然ブロック本体もあるわけなので、勝手に「ブロック モディファイア」のclassになる
• エレメントは「.-エレメント名」とブロック名を省略できる
• 最後に「|bem」と書いてBEMフィルターであることを明示する

以下のドキュメントなんかもあわせて参照しておくと良いでしょう。
Yandex BEM/OOCSS

BEM Advent Calendar 2013、4日目は越智さんです。