BEMを書くときの個人的プラクティス
シングルクラスでmodifierを使う
element内でクラス名を格納するための this を定義し、modifier内で継承しています。
これにより、
class="block__element block__element--modifier"
と2つクラスを付けるようなところを
class="block__element--modifier"
の1つだけで済みます。
scss
.block { @at-root { &__element { $this: &; font-size: 20px; &--modifierA { @extend #{$this}; color: red; } &--modifierB { @extend #{$this}; color: green; } } } }
アウトプット
.block__element, .block__element--modifierB, .block__element--modifierA { font-size: 20px; } .block__element--modifierA { color: red; } .block__element--modifierB { color: green; }
stylusの場合
.block &__element this = selector() font-size 20px &--modifierA @extend {this} color red &--modifierB @extend {this} color green