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

如果您要修改塊或元素，則還必須包含基類。

例如

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

這裏的原因：

• 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