重复块包装器的 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 中的包装器 其中子元素也是包装器？

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 与块 .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>

重复块包装器的 BEM 命名

BEM naming for wrappers for repeated blocks

bem