Multiple or single CSS file?

Single loads faster.

I agree with the lean and mean, but just think of it as efficiency. No point at all loading something that isn't going to be used. I also rip out all the unneeded white space from the sheets when I've finished most of the work on the site. This cuts them down by up to 35% in file size out of the ones I've done. There are plenty of online tools to do that for free and Expression Web can do it on a desktop.

I usually have 2 per site, my most used 2 col and often a 3 col or 2 column wide version when there is a lot of content. Sometimes I need something individual for a page and then I just put that style in the head.

I personally like to use multiple css files while creating the website. Most of the times I am using 4 different css files while creating the site:

• reset.css (see google for more info on css reset files)
• layout.css (all my main divs, that take care for the fundamental site structure)
• typo.css (all css code snippets related to the typographic +I also like to include my main lists, tables and input code snippets in here)
• special.css (all special css code snippets which are required by jquery addons or similar. ie. i have the overlay css etc in here)

I might have to add here, that I am always creating the main layout first (divs, margins etc) and I will not take care for colors or any design element until the site structure is done. I may add some borders in this phase to have a good overview of all divs.

As I said, I do this while I am creating the site, because when using just a single css for the whole site, i almost always loose the overview and start making mistakes.

Once I am 100% happy with the layout of the site, I am starting to put all css together and add the "look" (colors, sizes,shadows,gradients etc.) and remove the borders (the ones I added before).

Once this steps are done, i will check the whole site again and try to combine css rules to keep the file small. Once everything done, I will compress it, upload it to a CDN and add the link in my website´s head.


One more thing, I would recommend to you, if you plan to design more pages in the future:

make yourself a very basic html and css "template". u might want to make 2 or 3 different templates for static and fluid layouts. Do not include any design element, but just the css reset rules and the main structure.

You can than use this templates as a "starter" for all your sites.

I cant stress enough on how important this is. I have done over 100 sites before I have finally made a personal template (includes all my css resets, css ie bugfixes etc, which I learned in the past years). And I couldn't imagine to work without it now.

Edit: you may also want to look at the @import command in css. This way you can link only one css file in your html code, but still keep your css files seperate.

Example:
@import url('/css/reset.css');
@import url('/css/layout.css');
@import url('/css/typo.css');

Both if you have a small website, but if you have a big one, a single because it's faster

cheers