CSS Performance Question

Question

I was wondering what the experts do when it comes to writing CSS code. Is it bad to use the tagname.className style? Does inheritance cause a noticeable performance loss? Do

Answer 1

It should only affect file size and therefore load time.

A good way to go about it is while you are developing make the css as readable as possible (using as many selectors as needed for this), but when you go to put the site live take out unneeded selectors and compact it.

in development

div.result-row{...}
div.result-row div.photo-column{...}
div.result-row div.main-column{...}
div.result-row div.main-column div.text-row{}
div.result-row div.main-column div.date-row{}
div.result-row div.action-column{...}

live

.result-row{...}.photo-column{...}.main-column{...}.text-row{}.date-row{}.action-column{...}

EDIT

After reading some comments on this page, it makes sense that using complicated selectors can affect rendering time. According to the test results i've read about the load time is so small it won't be noticable, but it seems as if it does indeed affect it.

This should still not affect scrolling though.

Read these:

http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/ http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors https://developer.mozilla.org/en/Writing_Efficient_CSS