【CSS】BEMのデメリットについて

BEMはとても便利で個人的に大好きなCSS設計です。しかし、他の記事では見たことがない(と思う)ようなデメリットを感じました。

それは、「別のBlockのElementを使い回せない」ことです。

index.html

<header class="header">
  <a href="#" class="header__button">Button</a>
</header>

...

<footer class="footer">
  <a href="#" class="footer__button">Button</a>
</footer>

style.css

.header {
  ...
}

.header__button {
  color: #fff;
  background-color: #f00;
  padding: 5px 15px;
}

.footer {
...
}

/* .header__buttonと同じスタイル */
.footer__button {
  color: #fff;
  background-color: #f00;
  padding: 5px 15px;
}

もちろんプリプロセッサを使えばextendなどで共通化はできますが、クラスの付け替えでの対応はできないままです。

結論

あまりBEMの構造にとらわれすぎずに、一部分はマルチクラスにするなど柔軟に対応していきましょう。いいとこ取りをして便利に使うことが大切だと思います。

ちなみに、いろいろな設計からいいところを集めたような設計のFLOCSSというものが存在するので気になる方は見てみてください。