7

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

rctneil
  • 7,016
  • 10
  • 40
  • 83
  • Why has this been down voted? I am asking a serious naming convention question. – rctneil Oct 25 '13 at 16:47
  • 1
    Naming conventions are a personal choice: do what makes sense for your project. This type of question only results opinionated answers. – cimmanon Oct 25 '13 at 17:50
  • That's what I am after though. – rctneil Oct 25 '13 at 19:03
  • 3
    You're asking in the wrong place then. http://stackoverflow.com/help/dont-ask – imjared Oct 25 '13 at 20:44
  • 4
    @cimmanon BEM is (almost) all about naming conventions, so I think this is a valid question: it asks how apply a well defined methodology to a project. – Marcello Nuccio Jan 28 '14 at 17:29
  • 3
    outwardly BEM appears to just be a naming convention, but there is a right way and a wrong way to apply it, so a question about how to apply it is not a how should I name stuff question - again a question is closed because users can't see the nuances, this is a failure of the Stack Overflow moderation process – Toni Leigh Jun 26 '15 at 11:44
  • 1
    I don't understand why this has been closed. The question being asked is not opinion-based. It's a strict naming convention with a right and wrong way of doing things. If he'd asked 'How should I class these elements?' then yes. That would have been opinion-based, but he is asking specifically for BEM. – Undistraction Jul 29 '15 at 10:41
  • I am one more person, who is against the question closing. Maybe there is people who could answer the question. And there are people who also have such a problem or just an answer would be useful for them. – FreeLightman Dec 30 '16 at 19:02
  • It's definitely can be objectively answered: https://en.bem.info/methodology/faq/#can-i-create-elements-of-elements-block__elem1__elem2 – Alex Yaroshevich Aug 12 '17 at 10:41

1 Answers1

9

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.

tadatuta
  • 2,007
  • 11
  • 12