重复 block 包装器的 BEM 命名

Question

我不确定命名 BEM block 的最佳方式，因为它们需要包装器。例如，给定以下标记:

<div class="products-list">

  <div class="product__item">
    <div class="product__item__title">Product 1</div>
    <img class="product__item__image" />
  </div>

  <div class="product__item">
    <div class="product__item__title">Product 2</div>
    <img class="product__item__image" />
  </div>

</div>

我觉得顶部包装(产品列表)有点丢失。

这显然太深了，无法使用以下内容:

products-list__product__item__image

那么，我们如何处理 BEM 中的包装器其中子元素也是包装器？

Answer 1

有两个 block .product-list和product-item。

<div class="product-list">
  <div class="product-list__item product-item">
    <div class="product-item__title">Product 1</div>
    <img class="product-item__image" />
  </div>
  <div class="product-list__item product-item">
    <div class="product-item__title">Product 2</div>
    <img class="product-item__image" />
  </div>
</div>

这里元素.product-list__item与 block .product-item共享节点。

或者，如果您的列表的 CSS 规则可以在您的设计中重复使用，您可以将 .product-list 重命名为更通用的 .list:

<div class="list">
  <div class="list__item product-item">
    <div class="product-item__title">Product 1</div>
    <img class="product-item__image" />
  </div>
  <div class="list__item product-item">
    <div class="product-item__title">Product 2</div>
    <img class="product-item__image" />
  </div>
</div>