How to name nested elements using BEM and SMACCS

Question

I just started out using BEM and SMACCS for my stylesheets but have run into some trouble as far as naming deeply nested elements in the DOM. Say for instance I have a div called .main-container. Nested inside the first level of the main-container is an additional div which by convention would be named .main-container__article.

<div class="main-container>
  <div class="main-container__article></div>
</div>

This is where things get confusing. Inside that article div let's say I have a header followed by a paragraph that has a nested span tags. Do I continue prepending classes with main-container__article as so?

<div class="main-container>
  <div class="main-container__article>
    <h1 class="main-container__article__header">Heading</h1>
    <p class="main-container__article__copy">
      <span class="main-container__article__copy__intro-text>Example text.</span>
    </p>
  </div>
</div>

How far down does the rabbit hole go when it comes to naming parent/child elements? Is there a point where you reset at the second-level element and go from there?

<div class="main-container>
  <div class="article>
    <h1 class="article__header">Heading</h1>
    <p class="article__text">
      <span class="article__text__intro-text>This is example text.</span> for a paragraph 
    </p>
   </div>
</div>

tadatuta tadatuta · Accepted Answer · 2015-05-04T17:17:27

BEM naming shouldn't resemble DOM structure because otherwise you won't be able to change markup without changes in CSS.

So for your example I'd make it like this:

<div class="main-container">
  <div class="article">
    <h1 class="article__header">Heading</h1>
    <p class="article__copy">
      <span class="article__intro-text">Example text.</span>
    </p>
  </div>
</div>

There's also a quite powerful thing called mixes, which gives possibility to mix different BEM entities on the same DOM node: Heading Example text.

So now you may apply CSS to article block and main-container__article element separately which is very useful when you need to reuse article outside main-container.

How to name nested elements using BEM and SMACCS

2 Answers