1 style sheet or many?

[mlegg]

I was looking at a site someone wanted help with. The original designer had at least 5 style sheets, some very short with just 1 0r 2 things in it.

Is it not better to use just 1 and link every page in the site to it??

thanks

[djr33]

It depends. CSS stylesheets aren't large enough files that it should ever really matter.

There are three things to consider:
1. It is best to not reload the same information repeatedly. (Therefore, using external stylesheets in general is a good idea).
2. Loading more files (here, more CSS files) means more requests. But in the real world, the difference between 1-5 requests isn't a major consideration. So, yes, better to have one file, but not disastrous without it.
3. Each file will load faster if it is smaller. As CSS is just text, that's not a serious problem-- even a long CSS file will load quickly (probably faster than he actual response time for the request from the server). But in theory for this reason it's better to only load what is needed. So if those extra files are for parts of the site that may not be needed, it may be slightly better to not make everyone load all of the styles if they may not visit those other pages.


Generally speaking I'd suggest one stylesheet per section of the site. And for convenience you can split it more if it's getting too long to manage. Having just 1-2 lines in a stylesheet seems odd to me. There's no harm in combining them.

The only other reason I can think of to split them is if they conflict-- one says that text should be blue and one says that text should be red. That's a good reason to have two stylesheets. There are workarounds to it, but not just by combining the stylesheets. (You'd need to apply classes to the different pages and set that up in the stylesheets.)

[mhollis]

mlegg, one thing you should look at carefully is the order in which these five stylesheets are called. CSS means Cascading Style Sheet so, if you are combining several into one, you should be aware of the cascade and put the stuff in the last style sheets last.

I tend to have up to about three style sheets in my websites. One for general page layouts, one for navigation and a third as an auxiliary for anything special, like an online store section or some other widget like a slide show where I need to format text or layout within a particular section differently.

Usually a web browser can keep a certain amount of stuff in RAM, so things that are used by all pages, like JavaScript and style sheets that are common to all pages should be externalized and loaded in all pages first. That speeds up the loading of all pages in the website after the initial page loads.