さすがに普段使いはしませんが、いざという時のための備忘録。
普通のBEMの書き方
css
.block { ... }
/* 親要素 */
.block--modifier { ... }
/* 親要素の変化形 */
.block__element { ... }
/* 子(孫)要素 */
.block__element--modifier { ... }
/* 子(孫)要素の変化形 */
.block--modifier__element { ... }
/* 変化した親を持つ子(孫)要素 */
過剰に安全なBEMの書き方
※ 必要性を分かりやすくするために、.block
を.scope
にリネームしますね。
css
.scope:not(:root) { ... }
/* 親要素がdivかspan以外だった場合、詳細度不足に陥る可能性を踏まえて */
.scope.scope--modifier { ... }
/* 変化形が一人歩きしないように、オリジナルを伴わせる */
.scope .scope__element { ... }
/* 子(孫)要素がスコープの外側で呼ばれないように閉じ込める */
.scope .scope__element.scope__element--modifier { ... }
/* .is-接頭辞を使う方法では、マルチクラス時に誤発動する危険性がある */
.scope.scope--modifier .scope--modifier__element { ... }
/* .scopeを潰すだけで、子孫共々道連れにして無力化できる */
感想
素晴らしく安全ですが、さすがに普段使いは厳しそうです。
おまけ
Stylusで書くとこう。
main.styl
.scope
@import "./module"
module.styl
&:not(:root)
...
&&--modifier
...
& &__element
...
& &__element&__element
&--modifier
...
&&--modifier &--modifier
&__element
...