21

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.

5
  • 1
    It's because people think CSS can be completely decoupled from HTML and reused across different types of pages.
    – BoltClock
    Jun 21, 2016 at 6:58
  • @Bhojendra Nepal: I think not.
    – BoltClock
    Jun 21, 2016 at 7:04
  • 2
    It increases specificity, and makes it harder to reuse, if you wish to change the underlining html at any point (although this tends to be more of a problem with large codebases).
    – Lee
    Jun 21, 2016 at 10:04
  • 1
    @Lee: Are you sure h2.of-carousel is more specific than .header.of-carousel?
    – BoltClock
    Jun 21, 2016 at 10:43
  • @BoltClock: .header.of-carousel is more specific than h2.of-carousel, which is more specific than .carousel-header (which is what I would personally use), and also means more changes if changing underlying html (when targeting elements directly).
    – Lee
    Jun 21, 2016 at 12:16

3 Answers 3

12

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.

2
  • Yeah. I read it many times. tag#id is bad thing, indeed. No questions. But I still do not understand why tag.class is bad? Styling depending on the element is quite common case in my practice, in fact. And why this need is less important than ability to apply the same class to the different elements? I personally prefer <h2 class="first">, <li class="first"> and don't like <h2 class="article--subhead__first">, <li class="list__in-article--item__first"> and such WET / tautology :) In any case, thank you all for your answers.
    – Vladimir
    Jun 21, 2016 at 15:41
  • 1
    @Vladimir I think it is not good because it makes it more difficult to compute specificity, and also because mixing semantics (paragraphs, headers, code...) with presentation is more difficult to maintain. If you were to change a h2 by a h3, this would require to edit both the html and the stylesheet. Without mentioning any tag in your stylesheet, you wouldn't have this problem. Oct 11, 2016 at 12:21
1

You should avoid nesting, which minimizes the chance that other rules will clash with one another. Ensure that our CSS modules will look the same in any context.

.block__elem--modifier syntax is not ugly, if you are not using multiple nested elements.

0

The principle behind BEM is to remove all actual hierarchy in the CSS document and have just a single explicit rule for each element that is to be styled. This is why it is efficient -- the renderer never has to traverse through the DOM to deal with child rules, or try to match against more than a single qualifier (which is why using a tag qualifier alongside a class selector is considered "bad"). But I do agree, the standard naming convention for BEM is very__ugly. You can change that to suit your preferences, though.

You need to understand that CSS rules are processed right-to-left. Taking your example:

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

This will cause the renderer to match against all <header>, <h2> and <footer> elements first. With those matches it'll try to find a matching parent .carousel-item, iterating all of the way to the root of the document until it can find one. Applying this style to a deeply-nested document with several <h2> and <header> elements not contained in a .carousel-item would mean having a lot of wasted lookups. Simply put: this is not very efficient.

You can mitigate the effect this has by using the direct child selector (>), since then it won't try to iterate all the way through the DOM; it'll only try the first parent. BEM avoids this problem altogether.

Realistically speaking it is a very minor issue these days, and more CPU cycles are probably spent dealing with client JavaScript than non-optimal CSS. But it's a good thing to keep in mind if you are going to build something big.

3
  • If that's what BEM is for, then why bother with external CSS at all? Just use inline styles if each element gets its own rules. Seems like there's some cognitive dissonance between what BEM users want and what the point of CSS is.
    – TylerH
    Jun 21, 2016 at 14:11
  • Of course, I know about the 'right-to-left' and 'nothing nested' rules, about Yandex developers reasons but, in my opinion, if the document contains too many h2s or headers than it's just a bad document. Performance issues may be caused by the general-purpose elements, like divs, spans, links and list items. And they should be BEMed in large projects. For all other cases, narrow scope and cascading look the best quality / price ratio option.
    – Vladimir
    Jun 21, 2016 at 14:25
  • .some-ui-area h2 {/** how many subheads can be in your document? 2000? nope. 2–10, right? **/} Possible conflicts of rules in the future? Good. Create unique classes for all new special cases. In my opinion, it is much more in line with the principles of inheritance, DRY, KISS end so on.
    – Vladimir
    Jun 21, 2016 at 14:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.