Clarify how to apply block modifiers to the elements

[collimarco]

For example, if you have:

<div class="article article--featured">
  <h1 class="article__title"></h1>
</div>

Now I want to have a bigger h1 for the variant article--featured.

1. Should I add the class article__title--featured to h1 if I want to apply some styles to that element for the variation?
2. Or should I add a class article--featured__title?
3. Or should I keep only the class article__title and style it in CSS using a descendant selector .article--featured .article__title?

This is not clear from the spec.

I'm not an expert but if I had to choose, I'd go for the first one. The other two make no sense for me. The second one implies there is a property with a block name indicator, which would break your naming in the future. BEM doesn't use other selectors other than class-based ones, so avoid descendant selectors if you want to keep everything fully BEM.

[ZimCodes]

I believe the most BEM approach would be the 1st one. But the 3rd one is also BEM valid.

1. article__title--featured to h1 indicates the element has a separate modifier thats unique only to the element itself.

Edit: This is valid BEM, but very strict, as it encourages independent class names.

2. article--featured__title is not valid BEM syntax. The correct assembly would be article__title--featured or article--featured

3. Using .article--featured .article__title in CSS is correct too. It indicates you are styling the element, article__title, based on its block modifier article--featured, which is exactly what you're trying to do. The block's modifier is what's determining the style of its elements in this situation.

Edit: This approach encourages the idea of mixing to express complex relationships. (and reduce the amount of class names you have to write in the HTML)