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.

@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.