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.
@julien:
You could also just have .foo__bar__title and make it @extend from .bar__title, in the case you are using Sass.