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.

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