BEM Confusions with Naming Elements

Question

I use BEM in a project that works to make my CSS more modular and come across several situations that I think need a little clarification:

Context sensitive styles. I am constantly faced with the need to change the style of a module / component, depending on the class of the parent element.

Say I'm a grocery list style. I have my .product-list component and inside that all my .product-list__item . Then .product-list__item may have <h3> inside the product header.

My questions:

• Should .product-list__item also have a .item class?

• If the header inside the product has the following classes:

• • .item__title ?
• • .product-list__item__title ?

Say that the item also has a description field inside and in which the price is indicated:

• If the description contains:
• • .item__description ?
• • .product-list__item__description ?

• If the price has:

• • .item__description__price ?
• • .description__price ?
• • .price ?

I use subcomponents, for which I need to add their own separatley component name, i.e. .item or .description . I guess they need them, how and where do they apply their style?

Also, if I had higher, I would have a .product-list whcihsounds fine component, but if the subcomponents have their own component name added as a class, for example .item , then this is not very descriptive, is that so?

I know this may seem complicated, but I am serious about being confused, and I would like to hear your opinions. I read a ton of articles about BEM, and no one explains such things.

Neil

Answer 1

According to the BEM methodology, there are no element elements, so instead of product-list__item__title you should use product-list__item-title .

As for context-sensitive styles, you can use either a cascade (and place styles for the parent file) or a combination, as in your examples. The rule is simple: as soon as you find that you are using an element somewhere without its parent block, make it a separate block and use mixes, but if the elements are absolutely useless without a parent, using a cascade makes more sense.