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>