css - 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>

---

…since BEM classes are all “standalone,” and do not cascade…

我不同意这种说法。 BEM 类在很大程度上依赖于修饰符的级联。预计将使用基类，随后将使用修饰符来覆盖该特定状态的必要样式。

考虑以下 CSS:

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

如果顺序互换，修改器将不再正常工作。 BEM 依赖于级联，但试图保持较低的特异性以充分利用它。