Toro_Unit

タグ: MindBEMding

  • 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。

  • LessでBEMってみたらかなりさくさくコーディングできた！という話

    BEMを使ったCSSのクラス設計(MindBEMding)ですが、これをSassでやろうとすると、結構泣けてきます。

    たとえばこんな感じになるんでしょうかね。

    $block: ".block";
#{$block} {
	display: block;
}
#{$block}__element {	
	border: 1px solid #CCC;
}

#{$block}__element_modifier {
	border-color: #FFF;
}

    また、Sass 3.3以降だと、

    .block {
	display: block;
	@at-root {
		#{&}__element {
			border: 1px solid #CCC;
			@at-root {
				#{&}--modifier {
					border-color: #FFF;
				}
			}
		}
	}
	
	//もしくはこんな感じ
	@at-root {
		#{&}__element {
			border: 1px solid #CCC;
		}

		#{&}__element--modifier {
			border-color: #FFF;
		}
	}
}

    こんな感じで、BEMれるようです。
    参考: BEMという命名規則とSass 3.3の新しい記法 – アインシュタインの電話番号

    ただ、@at-rootなどを乱発したり、いちいちshiftをおしながら#{&}って入力していくのは、ちょっと大変すぎるなと個人的には感じます。というかめんどくさい。せっかくネストして楽にかけるはずのCSSが、より大変になっている気がしてしまいまして。

    LESSでやってみる

    Lessだと、こんな感じに書けて、 

    .block {
	display: block;
	&__element {
		border: 1px solid #CCC;
		&--modifier {
			border-color: #FFF;
		}
	}
}

    このソースを、lessをcssに変換(less2css) | Magonote-toolsにコピペするなり、普通にlessで走らせるなりすると、

    .block {
  display: block;
}
.block__element {
  border: 1px solid #CCC;
}
.block__element--modifier {
  border-color: #FFF;
}

    こうなります。こんな感じでLessはネストしつつ、しっかりBEMなCSSが出力されます。非常に直感的です！

    留意点

    SassとLessの大きな違いとなっていたextendがLess1.4から実装されましたが、&を含むセレクタのextendはできないようです。また、実際に出力されるセレクタを指定してもextendはできないようです。

    なので、.block__element–modifierに.block__elementのスタイルを継承するようなことはできず、html側で両方のclassを指定する必要があります。

    BEMという命名規則とSass 3.3の新しい記法 – アインシュタインの電話番号でも言及されていた、HTMLが冗長になってしまうと言う問題に対処することは難しいです。

    まとめ

    Windowsでも導入が簡単・JavaScriptとの相性が良いなどのSassには無いメリットもあるし、Compassでよく使うMixin等の移植もそこまで難しくないです。CssSpriteもCompass以外のツールで対応できますしね。

    Sassに比べるとCompassのようなフレームワークが無かったり、extendもSassのほうが若干協力だとかで
    なかなかLessを使おうという場面は少ないとは思いますが、それでもBEMとの相性がよいというのはなかなか見逃せない部分じゃないかなと思います。

    LessのextendもSassには無い書き方があったりしておもしろいですし、用途によって使い分けるとなかなか楽しいんじゃないですかね。