Proper way to use multiple stylesheets...so it WORKS?

Question

I am making a site where I need to have styles separated for layout, colors and typography. So basically I took my main style sheet and just copied it 3 times, and in removed everything but coloring from one, everything but type related in another and etc. But when I link to them now there must be some cascade issue or something, because a lot of the type stuff is not being applied. Is there a proper way to do this?

Answer 1

One easy way to figure this out is use the Firebug add-in for Firefox. Inspect a given element that you know should have type styles applied and it will show you what is being applied to that specific element.

Answer 2

First off. I would recommend against this kind of splitting as from the optimization perspective this adds additional requests to load time

To answer your question however, switch them around to load structure first, then color, then type.

Answer 3

I would suggest you to follow this convention.

1. Create different files based on their purpose. eg. (reset.css, base.css, typography.css, form.css, fcuk-ie.css[for IE specific stuffs], print.css)

2. Create an ANT process (if your are using Java) or anything equivalent. eg. in apache you can do something like add your link with href = "application.css" and your .htaccess should redirect request for application.css to something like getAllCSS.php and it requires all the above CSS files.

3. So now your browser is making only a single request (ie. application.css) and you still get all the CSS files.

   Initial load time might be more since we now have a very big file but it can be cached so all subsequent requests will be rapid fast.

And if you have all these basic styles defined upfront, you wont have to redefine the styles for every element.

Hope this makes sense.

Please correct me if I'm wrong.

Good luck :)

Answer 4

Probably unrelated, but sometimes an ASP.NET website will cache your css files on the server.

You can fix it by tacking on ?version=1 to the end of your style links. Example:

<link rel="stylesheet" type="text/css" href="css/structure.css?version=1" />

If they get cached again, just increment the version number and it will force the server to reload it.