Wie wird der Status mit BEM angegeben?

Question

Mit BEM CSS-Klasse Syntax können, sage ich mit der folgenden Klasse ein Element haben:

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

können nun sagen, es ist ein Ereignis, oder etwas, wo diese „Tooltip“ aktiv oder sichtbar wird. Was ist der richtige Weg, dies mit BEM auszudrücken? Muss ich die aktuelle Klasse ersetzen, so jetzt wird es:

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

oder füge ich es

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

Oder kann ich so nur einfach etwas tun:

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

Ich denke, das Antwort ist # 2, aber es scheint sehr langgezogen zu sein. # 3 ist nett und einfach, aber ich kann nicht sagen, ob dies den richtigen BEM-Richtlinien entspricht oder nicht.

Answer 1

Wenn Sie einen Block oder ein Element ändern, müssen Sie auch die Basisklasse hinzufügen.

Zum Beispiel

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

der Block geändert haben könnte wie:

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

oder das Element modifiziert:

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

In jedem Fall, dass Sie mehrere Klassen zu verwenden beginnen benötigen .

---

Mit Blick auf Ihr Beispiel:

<div class="purchase__module2__heading__tooltip"> 

Es ist klar, dass man zu tief sind nisten, sich zu verhindern, dass in der Lage, die Mehrheit des Codes wiederzuverwenden.

die Namen Gegeben Sie verwenden, ich denke, würde, dass Sie eigentlich, was haben ist:

• ein Kauf-Modul (.purchase-module)
  • mit einer Überschrift (.purchase-module__heading)
• ein Tooltip (.tooltip)

Das Markup könnte ungefähr so ​​aussehen:

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

Beachten Sie, wie macht die Tooltip aktiv jetzt erfordert nur einen kurzen Klassenwechsel:

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

, dass das Ideal mit BEM ist.

Answer 2

Sie haben Recht und die Antwort ist # 2.

Hier ist der Grund:

• 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

BTW, sollten Sie nicht DOM-Struktur halten bei der Benennung. Und hier ist warum: https://en.bem.info/methodology/faq/#why-does-bem-not-recommend-using-elements-within-elements-block__elem1__elem2