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为重复块的包装器命名

1 个答案: