BEM.html

<!--
    <component-name>[--modifier-name|__descendent-name]
    
    .component {}
    .component__descendant {}
    .component--modifier {}
-->

<article class="tweet tweet--is-expanded">
  <header class="tweet__header">
    <img class="tweet__avatar" src="{{src}}" alt="{{alt}}">
    …
  </header>
  <div class="tweet__body-text">
    …
    <button class="button button--default" type="button">…</button>
  </div>
</article>

SUITCSS.html

<!--
    [<namespace>-]<ComponentName>[--modifierName|-descendantName]
    
    .Component
    .Component-descendant
    .Component--modifier
    .Component.isState
-->

<article class="Tweet isExpanded">
  <header class="Tweet-header">
    <img class="Tweet-avatar" src="{{src}}" alt="{{alt}}">
    …
  </header>
  <div class="Tweet-bodyText">
    …
    <button class="Button Button--default" type="button">…</button>
  </div>
</article>