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要求該改性劑除了基類添加。

一個糾正您的標記的版本是：

<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依賴於​​級聯，但試圖保持特異性低，以充分利用它。