CODEWITHSUNDEEP
htmlcssnaming-conventionsbemsmacss
Carl Edwards
Carl Edwards

Reputation: 14424

How to name nested elements using BEM and SMACCS

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>

Upvotes: 1

Views: 1264

Answers (2)

tadatuta
tadatuta

Reputation: 2025

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.

Upvotes: 2

Johannes Reuter
Johannes Reuter

Reputation: 3547

.main-container__article__copy__intro-text

definitely doesn't help the readability and maintainability of your stylesheets.

I suggest to break such giant blocks into several smaller blocks. If you do this, you can reuse your styles - in your example you couldn't use the article-block somewhere else.

I would "reset" everytime you can encapsulate a block which can potentially be used in several places in your app/website.

Upvotes: 0

Related Questions