BEM 時の &.hoge がホゲえええな話 主にstylus

#はじめに

フロントエンドの皆さんならば

sass なら at-root stylus なら &__

とかでBEM のコーディングをうきうきやっていることでしょう。

#ここで問題

こういう書き方は static な状態に限ってはいいんだけど
例えば

 .root
   &__element
     hoge

   &.status_active
    え、.root__element に対して書きたい。。。。ほげええええ
  

みたいな状況に諸処陥る。
いい解決策が欲しいところ、書き方の構造自体が間違っているとしたら、意見をもらいたいですね。

#Stylus における打開策

selector() をつかう

stylus においては selector()という関数が結構いかしている。
これは現状の selector を 文字列で返すというもの
つまりこういう解決ができる。

.root
   self = selector()

   &__element
     hoge

   &.status_active
    {self}__element
      hogehoge

どや顔なんてできない不器用な解決方だが、とりあえず問題は解決できた。
いかがでしょうか？
もっとスマートなやり方がある方は是非シェアして欲しい。