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

Answer 2

你是对的，答案是＃2。

原因如下：

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

如何用BEM指定状态？

2 个答案: