如何使用 BEM 指定状态？

Question

使用 BEM CSS class 语法，假设我有一个具有以下 class:

的元素

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

现在假设有一个事件或某事使 "tooltip" 变得活跃或可见。用 BEM 表达这个的正确方法是什么？我是否将当前的 class 替换为：

...
<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。

原因如下：

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

Answer 2

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

例如

<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>

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

查看您的示例：

<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>

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

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

这就是 BEM 的理想选择。

如何使用 BEM 指定状态？

How to specify state with BEM?

html

css

bem