悩み。Modifierによるクラス名の冗長
自分のメモ。クラス名が長くなりがちになるBEM。特に長くなる時ってのは深い階層のModifierを付与するとき。
【例】main-content__header-titleに赤色のModifierを付与しようとしたとき
class=”main-content__header-title main-content__header-title–red”
Modifierが頻発しないとは思うけどhtml側で長くなるのがちょっと面倒。
そんな時@extendをscss側に付与すれば
【html】class=”main-content__header-title–red”
【scss】@extend main-content__header-title .&–red{…}
だけで済むようになる。ただcssの記述が
【css】.main-content__header-title, .main-content__header-title–red {…}
.main-content__header-title–red{…}
となるので特定の条件下（cssで管理のみとか）になった時、ややこしくなる。
となると@mixinを使えばいいという事になるかもしれんけど、これも増えるとstyle.css内に同じような記述が増えることになり、管理が面倒になる。
【css】.main-content__header-title{…}
.main-content__header-title–red{…（上段と同じスタイル）+変更スタイル}
htmlの記述が増えるか、cssの記述が増えるか。どっちにしろ増えるのであれば、一貫性を持たせる方がいい。つまりBEMの徹底。
もしくはModifierのみマルチクラス化。
【html】class=”main-content__header-title –red”
【css】.main-content__header-title.–red
ただこれもModifierが多くなりすぎると、ややこしい事になるので
【html】class=”main-content__header-title –red –fz20 –mt100″
一つに限定する必要はある
【html】class=”main-content__header-title –red-fz20-mt100″
【css】.main-content__header-title.–red-fz20-mt100
色々考えていくと、Modifierを多く出現させないこと自体が大切なんだろう。
結論。elementまでで完結させるようにした方が良い。
基本的にシングルクラス。Modifierには@extendを使用。ただマルチクラスを使う事は否定しない。
ブロックの中にブロックを作ることはOK。クラス名でブロックにするか、エレメントにするか深く考えない。
下記どちらでもよし。（ブロック内で一貫性は保つ）
【html】header__list-title
【html】header-list__title
SCSSでネストは擬似要素等のみ（検索引っ掛かりにくくなるので）。
※scss使っている理由はブロック管理しやすくする為。