如何用 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

你是对的，答案是 #2。

原因如下：

• https://en.bem.info/methodology/faq/#why-include-the-block-name-in-names-of-modifier-and-element
• https://en.bem.info/methodology/faq/#how-do-i-make-global-modifiers-for-blocks

顺便说一句，您不应该在命名时保留 DOM 结构。原因如下：https://en.bem.info/methodology/faq/#why-does-bem-not-recommend-using-elements-within-elements-block__elem1__elem2

Answer 2

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

例如

<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 的理想选择。