如何使用BEM指定状态? [英] How to specify state with BEM?

问题描述

使用BEM CSS类语法，可以说我有一个具有以下类的元素:

Using BEM CSS class syntax, lets say I have an element with the following class:

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

现在让我们说有一个事件或某些事情，此工具提示"变为活动或可见的.用BEM表达这一点的正确方法是什么?我是否要替换当前类，使其变为:

Now lets say there is an event or something where this "tooltip" becomes active or visible. What is the proper way to express this with BEM? Do I replace the current class so now it becomes:

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

还是我添加它

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

或者我可以做这样简单的事情吗?

Or can I just do something simple like this:

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

我认为答案是#2，但似乎很引人注目.#3很好而且很简单，但是我无法确定这是否遵循正确的BEM准则.

I think the answer is #2, but it seems very drawn out. #3 is nice and simple but I can't tell if this follows proper BEM guidelines or not.

推荐答案

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

If you're modifying a block or element you must include the base class as well.

例如

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

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

In either case you start needing to use multiple classes.

查看您的示例:

<div class="purchase__module2__heading__tooltip">

很明显，您嵌套得太深，阻止了自己重用大部分代码.

It's clear that you're nesting too deeply, preventing yourself from being able to reuse the majority of your code.

鉴于您使用的名称，我想您实际上拥有的是:

Given the names you're using, I'd guess that what you actually have is:

• 购买模块( .purchase-module )
  • 带有标题( .purchase-module__heading )

  标记可能类似于:

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

  请注意，现在如何使工具提示处于活动状态，仅需要更改一个简短的类:

  Note how making the tooltip active now just requires changing a short class:

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

  那是BEM的理想选择.

  That's the ideal with BEM.

  这篇关于如何使用BEM指定状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！