Many or few and how big is too big?

[gwmbox]

Can someone tell me what is better in relation to efficiency and loading etc for CSS in that is it better to have a number of smaller CSS files or have one or two larger ones?

In my design I could split my CSS files up into about 12 parts;
1) the main CSS file
2) the colours for the main body
3) the styles for a specific component of the site
4) the colours for 3
and repeat 3 and 4 above 4 more times for different site components

Obviously the benefit of the above is that the 2 css files for each component will only be calls when that component is being used - so smaller css file - but multiple css files.

OH BTW the reason for splitting the structure and colours is for allowing visitors to choose alternative site colours depending on their own preferences.

And by larger ones in that if I combine all the smaller ones into two larger ones (one for layout and one for colours) is there a maximum you should try not to exceed? Is 26k too big for a css file? What about a combined set of css files - what maximum, i.e. what if I had 4 css files totally say 36k, or even 50k etc?

So your thoughts and advice?

[gwmbox]

Thanks for that - helped a little but in my situation I am having up to 15 different colour variations (I have my reasons) where the user can select what colours they prefer. I also have holiday styles like Christmas etc that I use from time to time.

At the moment all 15 variations all use a common css file for site structure and then a seperate css file for the colours - i.e. colour1.css, colour2.css etc.

I however have various elements to my site that utilise their own specific styles separate from the main site style sheet and therefore I have set them up as element.css, but in turn to work with the colour#.css files I have an colour#element.css file for each colour variation. I have six parts of my site that utilise a separate set of styles in additiona to the sites main styles so if you can imagine my css directory may look like

sitestyle.css
colour1.css
colour2.css
colour3...15.css
element1.css
element2.css
element3..6.css
colour1element1.css
colour2element1.css
colour3...15element1.css
colour1element2.css
colour2element2.css
colour3...15element2.css
and so on until we get to
colour15.element6.css

So lots of css files but when a page loads at most it will call upon
sitestyle.css
colour#.css
element#.css
colour#element#.css

So only the four when a page is called.

The sitestyle is about 13k
The colour#.css is about 19k
Each element#.css is about 13k
Each colour#element#.css is about 5k

What I am planning to do is combining all the element#.css files where possible into one file and then also combine all the colour1element#.css into one file so I would have

sitestyle.css
colour1.css
colour2.css
colour3...15.css
elements.css (removes all element files to just one)
colour1elements.css
colour2elements.css
colour3...15elements.css (so only one css file for each colour and element set - greatly reduces number of files - which is easier to manage but....)

What is too big for a css file, 25k, 30k, 40k, 60k, 100k - and I mean combined as well - meaning if I had 4 css files should I make sure they do not exceed X size in total?

Cheers

[boogyman]

There isn't a set number that a css file shouldn't exceed.

What you should look at is what styles are necessary in what places. You could have a Terabyte (1,000) Gigabytes or more of CSS files for a website, however if all of those files arent necessary on every page, its pointless to include them.

You were saying that you break them out because you wanted to give the user (browser) the ability to change themes. There should be some type of underlying structure joining all of the sections on your site, and that code would need to be included within every page. It would probably be a good idea to include some type of default theme as well, and if the user choices to use a different one, that is when you bring in the additional sheets.

That will save you on both download time for each page and bandwidth usage for the site. So to recap... include what you MUST, and bring-in the different themes as appropriate