SassとかScssだとか、CSSプリプロセッサでBEMるときのはまりどころ

すっかりBEM道を邁進中の今日のこの頃ですが、ちょっとSCSSでやったときのはまりごと。

別に、https://gist.github.com/juno/6182957でも言及されているとおり、全てのセレクタをBEMにする必要はないのですが、BEMってないCSSを同時に使うには、ちょっと注意が必要です。

たとえば

.hoge {
	
	p {
		margin: 1em;
	}
	
	&__piyo {
		margin: 0;
	}
}

こんなやつ。

.hoge {
	
	p {
		margin: 1em;
	}
	
	.piyo {
		margin: 0;
	}
}

とCSSと書くのと、同じノリで書くと痛い目に見ます。
NO BEM であれば、.hoge p.piyoのmarginは0なのですが、
BEMった場合、.hoge pのほうが、BEMったセレクタの.hoge__piyoより優先度が高くなってしまいます。結果、先ほどのpのmarginは1emとなります。なので、BEMなCSSを書くのを結構強制されがちです。

CSSのオーバーライドがしづらくなるわけですね。

WordPressやら、CMSの本文部分のCSSを書くときにちょっと面倒なコトになりそうです。

その代わり、破綻しにくいCSSを作りやすいかもしれません。
SMACSSで言うところのbaseの設計が大変にはなったり、かといってbaseにごりごり書きすぎると、モジュール周りでmarginやらpaddingのリセットをいっぱい書く羽目になったり。

難しいですね。CSS。