BEMのmodifierのきれいな書き方

10032 ワード
Sass CSS bem CSS テキストリンク

日本で一番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-」で皆様もワンチャン狙ってください！

THANX & BIG UP‼︎‼︎