TR Output

フロントエンドエンジニアの備忘録

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