Elements can be nested within a component
CSS Naming Conventions: Less Rules, more Fun
Hans Christian Reinl
1264

This is what I still don’t get it. Does BEM advices a nesting limit? Because we can easilly end up with grand__children and grand__grand__children.

For instance I have a list of products with a product wrapper. Each product has an image, title and price. If there is no limit to nesting I would end up like this:

.products
.product__item
.product__item__visual
.product__item__visual__overlay
.product__item__visual__image
.product__item__data
.product__item__data__title
.product__item__data__price

Another variation would be something like this (considering that we can use a generic block of list and a modified version for products listing):

.list list--products
.product
.product__visual
.product__visual__overlay
.product__visual__image
.product__data
.product__data__title
.product__data__price

But still, that’s quite a lot of underscores. And since this code snippet is from a real project I experiment with, I know that I’ll have some utility classes applied to… let’s say the overlay of the image and possibly the very image as well. That means more typing. So it is possible that BEM meant something like this?

.products
.product__item
.item__visual
.visual__overlay
.visual__image
.item__data
.data__title
.data__price

Yet I’m doubthgul about it, since it is risky in case there is another data class, non related to the products block, which would make the naming inconsistent. So I’m a bit lost. Which one is it? Or none of the above?