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>

想法是，活动 link 下方会有下划线。但问题在于，由于 BEM 类 都是“独立的”，并且不级联，因此 AppHeader__subnav-link--active 不会从 AppHeader__subnav-link 继承任何东西（很明显）。我有更好的方法来构建它吗？或者我只需要采取以下措施：

&__subnav-link {
  // properties

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

Answer 1

BEM 要求将修饰符 添加 到基础 class。

您的标记的更正版本是：

<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 classes 严重依赖级联修饰符。预计将使用基础 class，随后将使用修饰符来覆盖该特定状态的必要样式。

考虑以下 CSS：

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

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