Are CSS selectors a big performance hit?

Question

Hi,

I have a web application with bunch of HTML code. There are some style-attributes that I can't get rid of, but I was wondering if it's worth the cleanness to get rid of class-names and use CSS selectors instead. Do CSS selectors perform slowly?

I'm talking about replacing class-name selectors such as .example with more complex selectors like #example div > div:nth-child(3) > p

Answer 1

The performance hit is tiny.

Answer 2

Take a look at this article to see a graph on this. I don't know how exact this benchmark is, but it seems child selectors are indeed slower, but you're not going to find any visible gains by avoiding child selectors.. this is a micro optimization that has "diminishing returns" written all over it.

Answer 3

Here you can find an interesting blog post on the argument with examples and tests of CSS selectors performances on most common browsers:

http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

This is the conclusion of the author:

Based on these tests I have the following hypothesis: For most web sites, the possible performance gains from optimizing CSS selectors will be small, and are not worth the costs. There are some types of CSS rules and interactions with JavaScript that can make a page noticeably slower. This is where the focus should be.