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依赖于​​级联，但试图保持特异性低，以充分利用它。