tags:

views:

48

answers:

3

Does separating CSS code into multiple declarations cause more overhead for users?

I have seen some .css files organized like so:

/* Font Styles */
#text{ font-size: 12px; color: white;}
.highlight{ color: red}
/* END */

/* Div Positioning */
#text{ position: absolute;}
/* END */

Could this cause any potential inefficiencies? I understand that something on this scale will have no noticeable effects, but what about on massive style sheets?

A: 

It can, but only if you have thousands of selectors. Read this article for more info: http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

Ryan Doherty
+3  A: 

Common sense says that the more rules you have, the more overhead there will be. However, CSS parsing is usually quite fast, so I wouldn't worry about it unless your stylesheets are truly ginormous.

Reinis I.
Something else you should also consider is the size of such CSS and HTML - if you create CSS selectors for every little thing and then sprinkle your HTML with it, the size of the download will go up and the user will wait a bit longer to view the site - add that to the probably small overhead of parsing the CSS and you can get something worth optimizing.
Igor Klimer
A: 

I think theoretically the answer has to be yes.

The browser must parse the new rule, it must look up the #text element again in the DOM and it must perform any new layout/rendering calculations.

Though as you point out, wait until this is a problem before you start optimizing.

Andy Hume