この記事は僕のポエムであり、夢です。
温かい目で見守ってください。
BEMのModifierの(僕が感じている)問題
BEMについての説明は省きます。詳しくはこことかを参考にお願いします。
簡単な例を上げます。
.navigation {
// ...
&__item {
// ...
&#{&}_selected {
// ...
}
}
}
こんな感じにscssを書いたとしましょう。
そうするとHTMLは
<div class="navigation">
<div class="navigation__item">Menu1</div>
<div class="navigation__item">Menu2</div>
<div class="navigation__item">Menu3</div>
<div class="navigation__item navigation__item_selected">Menu4</div>
</div>
こんな感じになるでしょうね。
それで僕の不満な点は、
navigation__item navigation__item_selectedこの部分です。
何故不満なのか。
- 長い。読みづらい。
-
__と_の違いを常に意識していないと、elementかmodifierなのかわからなくなる。
といったところでしょうか。
長い。読みづらい点について
selectedというmodifierを付けたいためだけに、block__elementをもう一度書かないといけなくなります。
b_等のBEMのクラス名をいい感じに構築するものもありますが、結局ほとんど同じように記述しないといけません。
またただクラス名を構築するためだけにJSを実行させるのも少し癪です。
しかもその殆どのクラス名は動的に変わることは無いはずです(上の例だとほとんどが動的に変わる可能性がありますが・・・)。
上の例はコード自体が少ないのでまだ見通しがいいのですが、
もっと長いものがたくさん出てくるかと思います。
またもしかしたらmodifierが複数個付く場合…
考えるだけであれですね…
elementかmodifierなのかわからなくなる点について
block自体にmodifierがついた場合、パット見でわからなくなるかと思います。
実際自分がやっている仕事や、個人的なものでも自分が命名規則を決めて、管理しているにもかかわらずどっちがどっちかわからなくなることがあります。
これは__,_を工夫することで回避できることですが、そもそもそこを工夫しないといけないってなんだよ！！！と思います。
ではどうするべきか
modifierの表現はカスタムデータ属性を使えばいいのでは。という考えに行き着きました。
.navigation {
// ...
&__item {
// ...
&[data-selected] {
// ...
}
}
}
<div class="navigation">
<div class="navigation__item">Menu1</div>
<div class="navigation__item">Menu2</div>
<div class="navigation__item">Menu3</div>
<div class="navigation__item" data-selected>Menu4</div>
</div>
modifierはカスタムデータ属性に押し込み、classはelementまたはblockに集中することができます。
こうすることで、同じ名前をn回書いたりしてなが～いclassを書くこともなくなり、また__?_？どっちだっけなんだっけ？みたいなことも起きなくなります。
それ以上にこれの利点は、
-
classには表示されるもの、blockまたはelementが記述されるところ。 - カスタムデータ属性には、状態・少しの見栄えの違い、
modifierを記述するところ。
と考え方を分けることができることだと思います。
まとめ
BEM自体は僕は好きですし、とても良い考えだと思ってます。
ですが、融通が利かないというか煩わしい思いもすることがあります。
BEMはあくまで設計手法、命名規則なのでそこから少し外れて、こうするといいのでは！と思うところはどんどん改善していくといいのかなぁ。とこれを考えながら思いました。
まぁBEMに限らず言えることだと思いますが…
これで終わりにしたいと思います。
ここまで読んでいただきましてありがとうございます。
またこういうふうに書いたほうがもっといいよ！という意見がありましたら、教えていただけますとありがたいです 