Performance implications for overriding CSS styles

Question

I'm setting up an image cluster for a webpage (similar to sprite-map) for performance reasons. I have a utility that generates the master image, and css to reference the image map.

For simplicity sake, I'd rather include the new css after the regular css file, instead of writing a script to search and replace all the classes in the original css. Something like so in the html (psuedo code):

<LINK href="normal.css" rel="stylesheet" type="text/css">

if(%=usingImageCluster=%)
      <LINK href="master.css" rel="stylesheet" type="text/css">

So all the styles that are defined in normal.css would get overridden by the new styles in master.css.

Couple of questions:

• Besides the "duplication" of information, does this override cause performance issues?

• Will the browser still pull the non-clustered images, because the original CSS file is still included (negating the positive performance gains of image clustering)?

• Is there a guarantee that the last loaded style will always be the one applied?

Answer 1

Besides the "duplication" of information, does this override cause performance issues?

Yes, you are generating a new HTTP request for the second external stylesheet. Too many HTTP requests is the #1 slowdown factor for most webpages.

Will the browser still pull the non-clustered images, because the original CSS file is still included (negating the positive performance gains of image clustering)?

Yes, the browser will pull ALL images from the first and second CSS file. Performance time will increase almost linearly (approximate). Especially if you are rewriting every css selector, or changing lots of images.

Is there a guarantee that the last loaded style will always be the one applied?

Yes. Unless the first sheet uses !important on certain style attributes, the last declared styles for a selector will always be applied. This is where Cascading Style Sheets get their name.