BEM naming for wrappers for repeated blocks

Question

I am unsure of the best way to name my BEM blocks, where they require a wrapper. For example, given the following markup:

<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>

I feel that the top wrapper (products-list) is kind of lost.

It's obviously too deep to use something like:

products-list__product__item__image

So, how do we handle wrappers in BEM where the child elements are also wrappers?

Answer 1

With two blocks .product-list and 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>

Here the elements .product-list__item share the node with blocks .product-item.

Or, if the CSS rules for your list can be reused in your design, you can rename .product-list to a more generic .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>