bem - 重复块的包装器的 BEM 命名

Question

我不确定命名我的 BEM 块的最佳方式，它们需要一个包装器。例如，给定以下标记：

<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中处理子元素也是 wrappers 的 wrappers呢？

Answer 1

有两个块.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与 blocks 共享节点.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>