BEMよりもBMEがさいつよ

BEMといえば、.block__element--modifierで有名なCSSの命名規則ですが、現実問題、.block--modifier__elementの順（BME）にした方が拡張性が高く、破綻しにくいので最強です¹。

論拠

1. 継承が美しい。

HTML

<!-- コンポーネントA -->
<div class="block"> ... </div>

<!-- コンポーネントAを継承したA" -->
<div class="block block--modifier"> ... </div>

<!-- Aの子孫要素 -->
<div class="block__element"> ... </div>

<!-- AとA"に共通の子孫要素 -->
<div class="block__element"> ... </div>

<!-- A"だけにある子孫要素 -->
<div class="block--modifier__element"> ... </div>

2. 子孫要素のモデファイには is の方が便利

HTML

<div class="block--modifier__element is-hide"> ... </div>

誰も.block--modifier__element--modifierなんて望みません。

3. 親要素のモデファイには is が使いづらい

HTML

<div class="block is-modified">
  <div class="block__element"> ... </div>
</div>

上記では、A"だけにある子孫要素なのかどうかを知る方法がありません。

結論

ということで、BEMよりもBMEがさいつよ。

証明終わり

---

1. ここではelementは子要素だけに限定せず、子孫要素とします。（つまり.block--modifier__element__elementの様にはなりません） ↩