如何根據BEM命名子元素？

Question

我對 BEM（塊元素修飾符）class 命名約定有疑問。

如果我需要有 3 個嵌套的 div，我應該如何命名第 3 個的 class？

 .one{} //block.one__two{} //block element //?

 <div class="one"> <div class="one__two"> <?-- How should I rename class "three"? --> <div class="three"></div> </div> </div>

我想將“.three”重命名為“one__two__three”或“two__three”，但我不確定這是否正確，因為據我了解，根據 BEM，不允許在元素內嵌套元素。

Answer 1

對我而言，它是關於關系的，尤其是鍵值關系，因此我會采用這種方式。

在不探索上下文命名范例的情況下，可以建議使用one__three 。

或者，如果one只是two容器，那么one可以重命名為two__container ， three可以重命名為two__item 。 當然，使用像這樣的編號標簽並沒有多大意義，但我希望您能看到它的領先地位。

Answer 2

嵌套元素很好； 根據您的需要構建結構。 重要的是不要將類名耦合到您的嵌套中。 類名模式實際上只識別兩種類型的 DOM 元素：塊本身和該塊的元素； 后者在命名模式方面都是平等的，無論嵌套在塊中有多深。 這是一個例子：

<div class="product-card">
  <div class="product-card__img-area">
    <img class="product-card__product-picture" src="https://example.com/cabulator.jpg"/>
  </div>
  <div class="product-card__header">
    <span class="product-card__main-headline">Encabulator</span>
    <span class="product-card__sub-headline">The turbo shmeerf of all Shmoof</span>
  </div>
  <div class="product-card__text-body">
    Lorem ipsum shmeerf of Shmoof quooz bar moof bla bla
  </div>
  <div class="product-card__footer">
    <a class="product-card__cta" href="https://example.com/buy.html">Buy it!</a>
  </div>
</div>

並根據需要添加修飾符：

  <div class="product-card__footer">
    <a class="product-card__cta product-card__cta--bargain" href="http://exmpl.com/buy">
      Buy it! 50% off for first-time customers!!!!!! OMG!!!!
    </a>
  </div>