BEMでhtmlにModifierつきのクラス名を付与だけでElementのスタイルも反映する

いつもこうやっていた実装

BEMでModifierを使うとき、Elementのクラス名もhtmlに付与しないとElementのスタイルが付与されない。
htmlのclassがやたら長くなるので嫌だなーと思っていた。

.block {
  width: 300px;
  margin: auto;

  &__element {
    display: inline-block;
    border-radius: 3px;

    &--modifier1 {
      background: red;
    }

    &--modifier2 {
      background: blue;
    }
  }
}

書き出し後

.block {
  width: 300px;
  margin: auto;
}
.block__element {
  display: inline-block;
  border-radius: 3px;
}
.block__element--modifier1 {
  background: red;
}
.block__element--modifier2 {
  background: blue;
}

<div class="block">
  <div class="block__element block__element--modifier1"></div>
  <div class="block__element block__element--modifier2"></div>
</div>

mixinで解決

mixin使って親スタイル持ってこれるようにすればできそう。

@mixin Element($blockName) {
  &__#{$blockName} {
    @content;
  }
}
@mixin Modifier($modifierName) {
  $parent: &;
  &--#{$modifierName} {
    @extend #{$parent};
    @content;
  }
}

.block {
  width: 300px;
  margin: auto;

  @include Element(element) {
    display: inline-block;

    @include Modifier(modifier1) {
      background: red;
    }

    @include Modifier(modifier2) {
      background: blue;
    }
  }
}

書き出し後

.block {
  width: 300px;
  margin: auto;
}
.block__element, .block__element--modifier2, .block__element--modifier1 {
  display: inline-block;
}
.block__element--modifier1 {
  background: red;
}
.block__element--modifier2 {
  background: blue;
}

<div class="block">
  <div class="block__element--modifier1"></div>
  <div class="block__element--modifier2"></div>
</div>

cssが太りそうだけど、htmlは多少すっきりする。