5

BEM --modifier css 命名規則を使用する利点を理解するのに苦労しています。誰かがこれがなぜなのか教えてもらえますか:

.my-element--checked {
    color: green;
}

これより良い？

.my-element.checked {
    color: green;
}

BEM --modifier を使用すると、マークアップは明らかに肥大化します。

4

3 に答える 3

2

修飾子クラスがすべての場合で BEM スタイルよりもうまく機能しない理由は、実際のケース (コンポーネント内により複雑なコンポーネントを持つことができる) では.checked、この場合、その要素の任意のクラスまたはその要素の下の任意のクラスに何らかの方法で適用できるためです。特に、UI の異なる場所で同じコンポーネントを使用する場合は、常に予測できるとは限りません。私たちは、.active ボタンが .tab などとスタイルを共有しないことを希望するのではなく、知ることを可能にする.active、またはという意味で同様の単語を使用する傾向があります。.disabled--modifier.active

BEM の基本的な約束は、これらすべての規則に従えば、副作用のないスタイルのコンポーネントが得られるということです。副作用のないコーディングは可能ですが、チーム全体でコーディングするのは非常に困難です。でも、嫌なら好きな方を使ってください。プロジェクトが十分に小さいか、十分に若い場合は、レンダリング ペイントのリフローの衝突ルールについてまだ心配する必要はないかもしれません。

于 2016-02-13T17:05:25.123 に答える