BEM Confusions with naming elements [closed]

Question

I have been using BEM on a project at work for keeping my CSS more modular and come across a few situations I feel a need for a bit of clarification on:

Context dependent styles. I keep coming across a need to change a style of a module/component dependent upon a class on a parent item.

Say I am style a product list. I have my .product-list component and inside that all my .product-list__item's. The .product-list__item's then might have an <h3> inside as the product title.

My questions are:

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

• Should the title inside the product have the following classes:

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

Say the item also had a description box within and that contained the price:

• Should the description have:
• • .item__description ?
• • .product-list__item__description ?

• Should the price have:

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

I do subcomponents sort of need their own component name added separatley ie: .item or .description. I'm guessing that they need them as where else do they get their styling applied?

Also, If I had the above I would have a .product-list component whcihsounds fine but if sub components have their own component name added as a class such as .item then that is not very descriptive of itself is it?

I know thei may sound complicated but I am serious about being confused here and would love to hear your opinions. I ahve read a ton of articles on BEM and not one explains this sort of thing.

Neil

Answer 1

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

As for context dependent styles you can use either cascade (and place styles to parent file) or mix as in your examples. Rule is simple: as soon as you find yourself using some item somewhere without its parent block — make it separate block and use mixes but if items are absolutely useless without parent using cascade makes more sense.