CSS标签限定（例如h1.some-class）有什么问题？

有人可以向我解释为什么标签合格是CSS不良做法的原因吗？为什么在带有自解释元素的情况下tag.class不好？例如

<section class="carousel-item">

  <header class="header of-carousel">
    <h2 class="heading of-carousel">Services</h2>
  </header>
    …
  <footer class="footer of-carousel">
    …
  </footer>

</section>

为什么它比带有上下文修饰符的DRY和简洁代码更好？

<section class="carousel-item">

  <header class="of-carousel">
    <h2 class="of-carousel">Services</h2>
  </header>
    …
  <footer class="of-carousel">
    …
  </footer>

</section>

.of-carousel {
  header.& {…}
  h2.& {…}
  footer.& {…}
}

甚至

section.carousel-item
  header
    h2
  footer

.carousel-item {
  header {…}
      h2 {…}
  footer {…}
}

我看到很多人沉迷于BEM，但是我不明白为什么？他们的选择器非常丑陋，尤其是在HTTP-2时代。