Unpraktische und praktische BEM-Benamung

praktisch.html

<!-- Jedes Element bezieht sich mit dem Namen NUR auf das Mosul und nicht auf eventuelle Elternelemente. -->
<div class="teaser">
  <header class="teaser__headercontainer">
    <h3 class="teaser__header">Überschrift</h3>
  </header>
  <div class="teaser__content">
    <p>Lorem Dingenskirchen und so weiter, ihr wisst schon ....</p>
  </div>
  <footer class="teaser__footer">
    <a href="linkziel.html" class="teaser__footerlink">weiterlesen ...</a>
  </footer>
</div>

unpraktisch.html

<!-- Sehr unpraktisch! -->
<!-- Block__Element--Modifier und nicht Block__Element__Element--Modifier -->

<!-- 1. Das DOM in BEM abzubilden beschränkt die Flexibilität. -->
<!-- 2. Wenn Content von Redakteuren geschrieben wird,
        kann man keine Klassen vergeben. -->
<div class="teaser">
  <header class="teaser__headercontainer">
    <h3 class="teaser__headercontainer__header">Überschrift</h3> <!-- 1. -->
  </header>
  <div class="teaser__content">
    <p class="teaser__content__paragraph">Lorem Dingenskirchen und so weiter, ihr wisst schon ....</p> <!-- 2. -->
  </div>
  <footer class="teaser__footer">
    <a href="linkziel.html" class="teaser__footerlink">weiterlesen ...</a>
  </footer>
</div>