如何使用 BEM 指定状态？

Question

使用 BEM CSS 类语法，假设我有一个具有以下类的元素：

...
<div class="purchase__module2__heading__tooltip">...</div>
...

现在让我们说有一个事件或某些东西使这个“工具提示”变得活跃或可见。用 BEM 表达这一点的正确方法是什么？我是否替换当前类，所以现在它变成：

...
<div class="purchase__module2__heading__tooltip--active">...</div>
...

或者我添加它

...
<div class="purchase__module2__heading__tooltip purchase__module2__heading__tooltip--active">...</div>
...

或者我可以做一些像这样简单的事情：

...
<div class="purchase__module2__heading__tooltip active">...</div>
...

我认为答案是#2，但它似乎很牵强。#3 很好也很简单，但我不知道这是否遵循适当的 BEM 指南。

Answer 1

如果要修改块或元素，则还必须包含基类。

例如

<div class="block">
  <div class="block__element">...</div>
</div>

可以将块修改为：

<div class="block block--modifier">
  <div class="block__element block--modifier__element">...</div>
</div>

或元素修改为：

<div class="block">
  <div class="block__element block__element--modifier">...</div>
</div>

无论哪种情况，您都开始需要使用多个类。

查看您的示例：

<div class="purchase__module2__heading__tooltip">

很明显，您嵌套得太深，导致您无法重用大部分代码。

鉴于您使用的名称，我猜您实际拥有的是：

• 购买模块 ( .purchase-module)
  • 带有标题 ( .purchase-module__heading)
• 工具提示 ( .tooltip)

标记可能类似于：

<article class="purchase-module">
  <h1 class="purchase-module__heading">
    ...heading text...
    <span class="tooltip">...</span>
  </h1>
</article>

请注意现在激活工具提示如何只需要更改一个简短的类：

<span class="tooltip tooltip--active">...</span>

这是 BEM 的理想选择。