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

Question

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.

Answer 1

The convention with which I am familiar is that qualifying is bad if the selectors are of varying levels of specificity. This is to say that it makes no sense to qualify an id with a class or tag (because the id is already unique), or to qualify a class with a tag (because the class should be more unique than the tag, and if your purpose is to have a class do two different things in two different cases you should increase readability by making them two different classes). I have, however, never been told that using a class-on-class qualifier is poor practice (in fact I suspect Bootstrap uses these fairly extensively, based purely on its syntax).

This article from MDN, which is one of the top search results for "css tag qualifying", appears to agree with my point of view, at least regarding when this is bad practice:

If a rule has an ID selector as its key selector, don’t add the tag name to the rule. Since IDs are unique, adding a tag name would slow down the matching process needlessly.

It goes on to say:

The previous concept also applies [to qualifying a tag with a class]. Though classes can be used many times on the same page, they are still more unique than a tag. One convention you can use is to include the tag name in the class name. However, this may cost some flexibility; if design changes are made to the tag, the class names must be changed as well. (It’s best to choose strictly semantic names, as such flexibility is one of the aims of separate stylesheets.)

CSS Tricks seems to agree, saying:

ID's are unique, so they don't need a tag name to go along with it. Doing so makes the selector less efficient. Don't do it with class names either, if you can avoid it. Classes aren't unique, so theoretically you could have a class name do something that could be useful on multiple different elements. And if you wanted to have that styling be different depending on the element, you might need to tag-qualify (e.g. li.first), but that's pretty rare, so in general, don't.

I hope that helps to answer your question.