BEMと他のクラスの継承プロパティ

Question

私はBEMの問題を少しでも抱えています。私は以下を持っています：

<ul className="AppHeader__subnav-links"> 
    <li className="AppHeader__subnav-link--active">Details</li> 
    <li className="AppHeader__subnav-link">Conditions</li> 
    <li className="AppHeader__subnav-link">Actions</li> 
    <li className="AppHeader__subnav-link">Assets</li> 
</ul> 

アクティブなリンクには下線が付きます。しかし、問題は、BEMクラスがすべて「スタンドアロン」であり、カスケードしないため、AppHeader__subnav-link--activeはAppHeader__subnav-link（明らかに）から何も継承しないということです。これを構造化するより良い方法はありますか？または私はちょうど次やっに頼らなければならないのです。

&__subnav-link { 
    // properties 

    &--active { 
    @extend .AppHeader__subnav-link; 
    // properties 
    } 
} 

Answer 1

BEMは修飾子は基本クラスに加えでに追加されている必要があります。

Aは、マークアップのバージョンを修正：

<ul className="AppHeader__subnav-links"> 
    <li className="AppHeader__subnav-link AppHeader__subnav-link--active">Details</li> 
    <li className="AppHeader__subnav-link">Conditions</li> 
    <li className="AppHeader__subnav-link">Actions</li> 
    <li className="AppHeader__subnav-link">Assets</li> 
</ul> 

---

＆hellip; BEMクラスは、「スタンドアロン」のすべてであり、カスケード＆hellipしていないからです。

私はこの声明に同意する必要があります。 BEMクラスはモディファイアのカスケードに大きく依存しています。基本クラスが使用され、その特定の状態に必要なスタイルをオーバーライドするために修飾子が続いていることが予想されます。

には、以下のCSSを考えてみましょう：

.widget { 
    border-color: gray; 
} 
.widget--active { 
    border-color: black; 
} 

順序を入れ替えた場合は、修正が正しく動作しなくなります。 BEMはカスケードに依存していますが、特異性を低く抑えて、最大限に活用しようとします。