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.

Answer 2

delta between the best case and the worst case was 50ms. In other words, consider selector performance but don’t waste too much time on it. See: https://smacss.com/book/selectors

So I do not think it makes much sense to extend CSS rules ONLY to get a higher performance. Just consider the higher amount of network traffic, maybe worse maintainability, ... However in the link you can read, which rules to consider without having to increase the CSS size.

If .container and div.container match exactly the same elements on your page, the first one might be even faster: If the browser evaluates .container at first, actually it would have been finished, but with div.container it has ADDITIONALLY to check, whether the element is a div.

disclaimer: I do not know how browsers really implement these things. My conclusions are based on the linked article.