日本で一番Qiitaが好き！tattです。
日々、ワンチャン狙いながらホームページ手作りおじさんやってます！
さっそくですが、「BEMの一番きれいな書き方 -2016 summer-」、tatt開催しまーす！！！
これまでのBEM
これまで最適解が出ず（ググり方が悪かった）、BEM用のmixinを作り、さらにplaceholder selectorを作って@extendさせてました。
今思えば、正気の沙汰とは思えません。
(ちなみにscssよりsass派、ElementごとにModifier作りたい派、トランクスよりボクサーパンツ派、茶髪より黒髪派です)
_bem.sass
// Element用のミックスイン(__でつなぐ)
=e($name)
@at-root #{&}__#{$name}
@content
// Modifier用のミックスイン(--でつなぐ)
=m($name)
@at-root #{&}--#{$name}
@content
sample.sass
@import "bem"
%sampleElement
font-size: 10px
line-height: 1
color: black
.sample
// .sampleブロックのスタイル
+e(element)
// .sample__elementのスタイル
@extend %sampleElement
+m(red)
// .sample__element--redのスタイル
@extend %sampleElement
color: red
+m(blue)
// .sample__element--blueのスタイル
@extend %sampleElement
color: blue
コンパイル後、
sample.css
.sample__element, .sample__element--red {
font-size: 10px;
line-height: 1;
color: black;
}
.sample__element--red {
color: red;
}
.sample__element--blue {
color: blue;
}
一時期はこれで良しとしてました。
一応、Elementのスタイルを一元管理できているので。
ただ、こんなコードを書いてたのではワンチャン狙うどころか、LINEの交換さえ危ういですね。
もしも、LINE交換できても既読スルー→(5日後に)ごめん、寝てた
の流れです。
これからのBEM
まずBEM用のmixinは必要ありません(※sass 3.3.0.rc.3以降)
以前のver.でもありましたが、擬似クラス、擬似要素、セレクタの連結などに使用していた&を、親のクラス名を子のクラス名の一部にすることがインターポレーション(#{})なしで可能になっているのです。
これを用いてスマートなLINEの交換方ほ… いえ、BEMを書くことができます。
sample.sass
.sample
// .sampleブロックのスタイル
&__element
// &を変数に格納
$this: &
// .sample__elementのスタイル
font-size: 10px
line-height: 1
color: black
&--red
// .sample__element--redのスタイル
@extend #{$this}
color: red
&--blue
// .sample__element--blueのスタイル
@extend #{$this}
color: blue
コンパイル後、
sample.css
.sample2__element, .sample2__element--red {
font-size: 10px;
line-height: 1;
color: black;
}
.sample2__element--red {
color: red;
}
.sample2__element--blue {
color: blue;
}
スマートすぎるー！たぎるー
！！
&がブロックスコープなので各Elementで$this: &できます。
sample.sass
.sample
// .sampleブロックのスタイル
&__element
// &を変数に格納
$this: &
// .sample__elementのスタイル
font-size: 10px
line-height: 1
color: black
&--red
// .sample__element--redのスタイル
@extend #{$this}
color: red
&__element2
// &を変数に格納
$this: &
// .sample__elementのスタイル
font-size: 20px
line-height: 1
color: black
&--red
// .sample__element2--redのスタイル
@extend #{$this}
color: red
よかったら、「BEMの一番きれいな書き方 -2016 summer-」で皆様もワンチャン狙ってください！