Are fully qualified CSS styles efficient?

Question

In creating CSS styles one approach seems to be a fully qualified style such as

#pnlImage div.ipd-imageInfo div.ipd-tags span.ipd-tag

compared to a shorter definition such as

div.ipd-tags span.ipd-tag

which would uniquely identify the style as well. However, if the site is expanded or changed the 2nd style runs the risk of not uniquely identifying the element.

Is there a performance hit from fully qualifying a style, i.e., it is longer? Are there some guidelines/best practice references for style naming?

Thanks

Answer 1

Google (not a search, actually them) seems to think that it does cause a performance hit.

Also, the Mozilla foundation has an article "Writing Efficient CSS for use in the Mozilla UI" that outlines the possible performance pitfalls of CSS selectors in their browser(s), and how to optimize your style rules for their rendering engine. Their article has tons of examples of what's good and what's bad. Please keep in mind this is only relevant to their browsers, though.

There are also some benchmarks publicly available, about CSS selectors affect on rendering speeds:

• http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/
• http://blog.archive.jpsykes.com/153/more-css-performance-testing-pt-3/

I, however, think this is, for the most part, horse manure. You can effect FAR greater change on your page's loading/rendering speed by using some other simple optimizations. I believe that your sanity, and a well-organized code base should come first. If this were as big of a deal as some make it out to be, we'd all be back using HTML < 4 attributes (bgcolor=, border=, etc) to style our web pages.

Answer 2

1. Looking up an #id is fast.
2. Looking up a tag is a bit slower.
3. Looking up a .class is the slowest.

Starting your selectors with a faster lookup will reduce the number of lookups required for then next part. That is, if I wrote p.myClass, then the browser can very quickly find all the p tags and then it only has to loop through those to check for the class name.

That said, it would rate the maintainability of your CSS file higher than its rendering speed. Blah blah blah premature optimisation blah blah.