How to name the sub elements of sub elements on SMACSS?

naming.md

What to do when you have sub elements that have sub elements? How to name them?

Always namespace to the module name + __ + the sub element no matter what?

<section class="foo">

  <!-- Regular sub element -->
  <div class="foo__chart">
    I'm a chart
  </div>

  <!-- Another sub elements with sub elements -->
  <div class="foo__data">
    <p class="foo__title">I'm the title</p>
    <p class="foo__subtitle">I'm the subtitle</p>
    <p class="foo__description">I'm the description</p>
  </div>

</section>

Or should I do something like this?

<section class="foo">

  <!-- Regular sub element -->
  <div class="foo__chart">
    I'm a chart
  </div>

  <!-- Another sub elements with sub elements -->
  <div class="foo__data">
    <!-- Should I use multiple levels of hierarchy? -->
    <p class="foo__data__title">I'm the title</p>
    <!-- Or should I go with something like this? -->
    <p class="foo-data__subtitle">I'm the subtitle</p>
    <!-- I can also forget about my parent and start a new module? -->
    <p class="data-subtitle">I'm the description</p>
  </div>

</section>

Your help will be much appreciated.

Either approach is acceptable. I generally use the second (module__child__grandchild) by default and fall back to the first (module__child & module__grandchild) when the first approach just seems too verbose.

One thing you might ask yourself is if you could decouple some of what you are doing here. For example, your container divs look like they are probably just there for layout. A grid system could help:

<div class="foo grid-4">
  <div class="span-1">
    <div class="foo__chart"></div>
  </div>
  <div class="span-3">
    <p class="foo__title">I'm the title</p>
    <p class="foo__subtitle">I'm the subtitle</p>
    <p class="foo__description">I'm the description</p>
  </div>
</div>

This assumes the following grid CSS:

.grid-4 {
  display: table;

  .span-1 { display: table-cell; width: 25%; }
  .span-2 { display: table-cell; width: 50%; }
  .span-3 { display: table-cell; width: 75%; }
}

I'll use "bar" instead of "data" because it's meaningless. If "bar" could be considered as an independent block (usable outside of the foo context with the same look), I'm doing this :

<section class="foo">
  <div class="bar">
    <p class="bar__title">I'm the title</p>
    <p class="bar__subtitle">I'm the subtitle</p>
  </div>
</section>

If foo's bars are considered as blocks and elements, I'm doing this :

<section class="foo">
  <div class="bar foo__bar">
    <p class="bar__title">I'm the title</p>
    <p class="bar__subtitle">I'm the subtitle</p>
  </div>
</section>

If foo's bar elements have some specificities and some commons (vs. independent bars), or if bar nesting is possible I'm going more verbose but safer (avoid the child > selector) :

<section class="foo">
  <div class="bar foo__bar">
    <p class="bar__title foo__bar__title">I'm the title</p>
    <p class="bar__subtitle foo__bar__subtitle">I'm the subtitle</p>
  </div>
</section>

Hope it helps

@julien:

You could also just have .foo__bar__title and make it @extend from .bar__title, in the case you are using Sass.

@mbavio : I'm using Sass but I'm always suspicious with @extend
You can easily abusing of it, like nesting, and ending with selector bloat.
I prefer summing classes in my HTML rather than extending them ;)

@jlong @mbavio @JulienCabanes Great stuff guys! Nice to see different approaches. You guys are right, usually there's always a way to decouple things which avoids the need of thinking about naming "deeper" subelements.

Regarding the @extend thing... This is another question of mine. What do you guys prefer, having a single class name attached to elements and using @extend or having multiple class names and forgetting about @extend (just using it for placeholders) instead?
I personally switch between these two options. Still didn't figured a "perfect" way to do it.