performance - Is CSS faster when you are specific?

Question

Is div.container faster than .container ? You know like in jquery if you be more specific with your selectors it is faster since it iterates through less.. Is this the case with css ?

Is there a way to measure performance in css ? Performance wise, does things like this even matter or does it all depend on text weight basically ?

I'd be happy if someone knows the answer to it, I've actually found a similar question with no certain answer. Can CSS be more efficient if it is better specified?

Answer 1

In real world the speed difference would be negligible.
To be technical .container would be faster as it has fewer selectors to process.

Selectors have an inherent efficiency. The order of more to less efficient CSS selectors goes thus:

1. ID, e.g. #header
2. Class, e.g. .promo
3. Type, e.g. div
4. Adjacent sibling, e.g. h2 + p
5. Child, e.g. li > ul
6. Descendant, *e.g. ul a*
7. Universal, i.e. *
8. Attribute, e.g. [type="text"]
9. Pseudo-classes/-elements, e.g. a:hover

In regards to your second question:

Is there a way to measure performance in CSS ?

Steve Souders put out an online test to measure performance of CSS that can still be accessed here.

There are better ways to measure performance nowadays, but this is a quick and easy resource you can play with.

Performance wise, does things like this even matter or does it all depend on text weight basically ?

The short answer is "not really".

The long answer is, "it depends". If you are working on a simple site there is really no point to make a fuss about CSS performance other than general knowledge you may gain from best practices.

If you are creating a site with tens of thousands of DOM elements then yes, it will matter.