Geek Answers Handbook

Faster of two CSS rules: with / without multiple identifiers

So, I recently worked a lot with Concrete5. I noticed, however, that the default theme has many CSS rules , which are defined as follows:

#page #central #sidebar p{line-height:24px}

Since the "sidebar" is an identifier, there should only be one "sidebar" on the entire page (provided that it checks what I'm doing). Therefore, if #sidebarlocated in #page #central, it should always be in #page #central. No matter what. On each page.

By this logic, the following rule does the same:

#sidebar p{line-height:24px}

Testing this, of course, worked. So my question is: who will have better performance? Is there a speed-related reason why the Concrete5 team went with a longer specification or simply helped future developers find a #sidebardiv? I can see the arguments for being faster anyway.

If case 1 is faster ( #page #central #sidebar):

If the browser uses a breadth-first search algorithm to find the correct DOM element, then the search #sidebarinvolves searching for the second level of the EACH DOM element , which had children before it reached the third, and at that moment it will still have several elements on which it looks before finding #sidebar. By specifying the elements in this way, the width search will recognize #pageand know that it needs to continue the search in this element, and not continue the entire DOM.

If case 2 is faster ( #sidebar):

, , , DOM , , . , , DOM ( , ), - , #page, #page, #center, #center, #sidebar. ,

+5
4

AFAIK CSS- , #page #central #sidebar #sidebar , .

specificity.

id/class/ , , .

#page #central #sidebar p 3-0-1, #sidebar p 1-0-1, , #page #central #sidebar p .

, :

... #sidebar #page #central, #page #central. . .

, , . , id , , .

: (Drupal) . , #search-block #header , #sidebar . #search-block , .

+4

, .

#header {
   background: blue;
}

#home #header {
   background: red;
}

, -. , , class id body CSS JavaScript.

+1

, ID-, , ID-, , , - .

#page #central #sidebar p

p #sidebar, #sidebar #central, #page. #sidebar s:

<body>
    <div id="sidebar"></div>
</body>

<body>
    <div id="page">
        <div id="sidebar"></div>
    </div>
</body>

<body>
    <div id="central">
        <div id="sidebar"></div>
    </div>
</body>

, , , , , DOM , . -; CSS #sidebar, - , #page #central, .

#sidebar p

p #sidebar, DOM #sidebar.

, , , :

" " - , " " ( , , ). , #sidebar #page #central, #page #central. . .

, . #sidebar , , #sidebar , #page #central. - , . , .

With that said, if you can ensure that your markup always contains #page #central #sidebarin this structure, then there is no problem with the choice #sidebar. I mean, different selectors mean different things, and you are not just choosing one or the other for performance reasons - most often this is not the case.

+1
source

More articles:


All Articles