Best way to select elements using CSS

Question

I read all about the best ordering of selectors in CSS, but I often (all the time) see people doing this ....

nav ul li#email-me a { width: 120px; height: 43px; background: url(images/email_me.png) no-repeat top left; display: block; } 

From what I read, I understand that this is better for performance ...

 #email-me a { width: 120px; height: 43px; background: url(images/email_me.png) no-repeat top left; display: block; } 

Am I missing something? Is the second method better? If so, why does everyone use the first method?

Answer 1

I often use the first method because

• As mentioned in some other answers, this is more specific. An identifier does not automatically make a complete rule more specific than any others forever; you can add a type selector - or almost everything except the universal * selector - to the identifier, and it will immediately supplant the rule with a single identifier. I don’t find that I specifically increase the specificity of the selector using this technique, as far as I do for the organization, though ...

• To clarify the organization: such a rule is often associated with other rules starting with nav ul , and helps visually group them with several initial selectors that already exist.

  For instance:

   nav ul { /* Styles for the ul */ } nav ul li { /* Styles for the items */ } nav ul li a { /* Styles for the item links */ } /* * If the selector here were just #email-me a, it'd be impossible * to see, right away, how it related to the above rules, without * studying the markup that it applies to, and so on. */ nav ul li#email-me a { /* Styles for the link in the #email-me item */ } 

The second method is supposedly faster, because after identifying the ancestor element with the identifier, no additional checks are required, but I do not have benchmarks, and I can not worry about making them.

Answer 2

Sometimes there is a certain thing that people try to overcome; they just keep adding sections to their selector until they become more specific than others.

But rather, it is simply ignorance and / or thoughtlessness.

We are better than them !: D

Answer 3

The second method is really not much better than the first in terms of performance.

According to Mozilla , the style system starts with a key selector (in your example, a ) and starts moving to the left, trying to match each ancestor element in the DOM tree with a selector.

It is considered inefficient because the system first finds all the a tags and traverses each tree's dominance. If you had thousands of a tags on your page, you would need to cross each of your ancestors in an attempt to match the selector. It would be more efficient to focus on a specific identifier or class.

Actually, if you do not have a page with LOTS elements, this is a kind of micro optimization, which you usually do not need to worry about.

Answer 4

The second example is likely to work better, but the question is about weighting performance versus context.

For example, in the second example, you say that any anchor element that is a descendant of any element with the email-me identifier must have a style. The question is, what do you really mean?

For example, if on another page another element should use the email-me identifier, we can say that the element is a div , should the links inside it receive the same style? Do you really want to say? If so, then great.

If not, do you really mean the context described in the first example: only bindings that are descendants of a list item with email-me identifier, which are descendants of an unordered list that are inside the navigation section of the page.

I would say that, as before , it really depends on what you are trying to say. But I would say that most of the time, sacrificing specificity / clarity for performance, is not a good deal.

Answer 5

This is somewhat up to personal choice. A little defense of the first selector you showed: it shows the best context chain. This can be useful when scrolling through a lot of CSS to see how this #email-me element fits. In your example, I see part of the nav structure that gives a hint on how it is used.

In terms of performance, the difference is extremely small (negligible).

However, in my opinion, the best CSS selector is the smallest CSS selector. Therefore, I will vote for the second.

Answer 6

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Read about specificity. No wonder many people do it wrong.