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>

...因为BEM课程都是“独立的”，而不是级联......

我不同意这种说法。 BEM类严重依赖于修饰符的级联。它预计将使用基类，并且随后将使用修饰符来覆盖该特定状态的必要样式。

考虑以下CSS：

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

如果订单互换，修改器将无法正常工作。 BEM依赖于级联，但试图保持低特异性，以便充分利用它。

BEM和继承其他类的属性

1 个答案: