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って難しい・・・