What's wrong with CSS tag qualifying (e.g. h1.some-class)?

Could somebody please explain to me the reasons why tag qualifying is a bad CSS practice? Why tag.class is bad in cases with self-explained elements? E.g.

<section class="carousel-item">

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

</section>

Why should it be better than the DRY and concise code with context modifiers?

<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.& {…}
}

Or even

section.carousel-item
  header
    h2
  footer

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

I see that many people are addicted to BEM, but I do not understand why? Their selectors are so ugly, especially--in-the-HTTP-2__times.