BEM記法でSCSSを書く際のほんのちょっとしたテクニック

BEMでscssを書く際のちょっとしたテクニックです。本当にちょっとしたものです。
既に、ご紹介されている方はたくさんいますが、
最近知り、地味に感動したので、自分用のメモに残しておきます。

BEMを書いているとよくあるこんなこと

blockに対するmodifierの下位elementにスタイルを指定したいときのこんな書き方。

style.scss

// block
.block {
  width: 200px;
  height: 200px;

  // element
  &__element {
    width: 100px;
    height: 100px;
  }

  // block modifier
  &--red {
   .block__element {
     width: 150px;
     height: 150px;
     background: red;
   }
  }
}

気に入らない点

• &で省略して書いているのに、ここに来て記述が長くなってしまう。
• 上記に付随して、なんか気持ち悪い。なんかダサい。

理想の書き方

あくまで理想の書き方。当たり前だが、scssの仕様上、通らない。

bad.scss

// block
.block {
  // 省略  

  // block modifier
  &--red {
   &__element{
     width: 150px;
     height: 150px;
     background: red;
   }
  }
}

じゃあどうするか

block直下で&を変数にしておく。クラス名の場合はインターポーレションを使用する。

good.scss

// block
.block {
  // 省略
  $and: &;

  // block modifier
  &--red {
   #{$and}__element {
     width: 150px;
     height: 150px;
     background: red;
   }
  }
}

$andを使用しているが、何でもいいみたいです！
こうすることで、理想通りのスタイルを当てることができる。知らなかった。。。。

さいごに

BEMって難しい・・・