What's the correct way to name list items using BEM. I've been using #1 below but have seen other websites use other BEM naming conventions.
#1
<ul class="products-list">
<li class="products-list__item">
<li class="products-list__item-title"></li>
<li class="products-list__item-description"></li>
</li>
</ul>
#2
<ul class="products__list">
<li class="products__item">
<li class="products__item-title"></li>
<li class="products__item-description"></li>
</li>
</ul>
#3
<ul class="products__list">
<li class="products__item">
<li class="products__title"></li>
<li class="products__description"></li>
</li>
</ul>
#4
<ul class="products">
<li class="products__item">
<li class="products__item-title"></li>
<li class="products__item-description"></li>
</li>
</ul>
#5
<ul class="products">
<li class="product">
<li class="product__title"></li>
<li class="product__description"></li>
</li>
</ul>
test
Your code semantically wrong, right? you need a
for the inner li's.
But anyway, I have 7th approach which I sometimes use
For me I choose the convention based on reusability, if a component has children and they are never gonna be used anywhere else, then I make the children follow the parent name. but if the children are gonna be used in a different place, I simply give them two classes but you can also add one more tag to identify the reusable component.