css declaration efficiency

Does separating CSS开发者_Python百科 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?

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.

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/

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.