過剰に安全なBEMの書き方

さすがに普段使いはしませんが、いざという時のための備忘録。

普通の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
    ...