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.

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.