Suppose there is such a markup:

<header id="header"> <div class="header-top"> <div class="callus">+0 000 0000 00</div> </div> </header>

And there are several options:

 .callus {} #header .callus {} .header-top .callus {} #header .header-top .callus {}

I usually watch the first option on sites. But it seems to me that this is not a good idea for 2 reasons:

  1. Great chance of conflict with future modifications (another person will have to have fun with your styles, even if he just wants to add, and not change something)
  2. When adding a news / post to the site, the visual editor can add some kind of its own design or tags (which I personally encountered many times).

The second option , like, specifies: we need the elements in the header. But with a large level of nesting, the engine makes a long way from each of the elements with the callus class to the very top, until it finds an element with id header

The third option is something between 1 and 2. It seems to solve the problem, but the chance of error remains.

The fourth option is called redundant selectors , if not mistaken. And yes, this is bad.

What advise about the selectors? The fact that class names should reflect the essence of the element as much as possible is understandable. And what about concretization, reducing the likelihood of errors and performance?

I like the BEM system, but not everything is clear. I would be grateful if someone would lead css-styles for such markup:

 <header class="header"> <img class="logo"> <form class="search-form"> <input type="input"> <button type="button"></button> </form> <ul class="lang-switcher"> <li class="lang-switcher__item"> <a class="lang-switcher__link" href="url">en</a> </li> <li class="lang-switcher__item"> <a class="lang-switcher__link" href="url">ru</a> </li> </ul> </header>

Why, for example, logo instead of header__logo ?

  • one
    [weight selectors] habrahabr.ru/post/137588 [bam] ru.bem.info/methodology - HamSter
  • I looked, but there are moments that are not fully described. Those. there may be an element with the sth class and inside it an element with the sth__elem class and then it is clear how to write css-styles. But there is also a header in the tree with a nested search and no css example for such a case - user64675
  • About the weight of the selectors did not understand. Those. at all. Not the article itself, nothing to do with it. - user64675
  • then read again, just ask such a question .callus {} #header .callus {} .header-top .callus {} #header .header-top .callus {} and do not understand the difference !!! - HamSter 5:57 pm
  • First, calmer. Secondly, an article about how different selectors affect an element. And the question was about the nesting of selectors and which option is better. Here's a BEM topic. - user64675

1 answer 1

Do not be wise and make it easier.

  1. Does the name accurately characterize the element?

    • Yes - go to step 2.
    • No - rename, then go to step 2.

  2. Maybe a few such elements?

    • Yes - They should all look the same?

      • Yes - use only class.
      • No - use nesting.

    • No - use class only.

The second option ... with a large level of nesting engine makes a big way

This is the most common and most optimized operation. It is almost free.

  • @Arhad, in js the ternary operator is the same;) - Qwertiy ♦