If you have a site that uses allot of css is it better to have a main.css with just css that's required sitewide for headers, footers etc. Then have css in seperate files for each page? Or is it better to have it all in one larger file?
When developing quite big websites ( i.e social net, web-app ) usually i'm dividing the CSS depending on its function. ie. : resets, frameworks, layouts, uielements, etc. Just because its easier to handle that way. On production stage, what we consider is usually the size of the css. If overall your css is, say, below 200K than cramping it on 1 file is affordable. But, like in web app, you got a lot of css files to use, and not all of it used on the current users action so i prefer to divide them. Just my 2 cents, and i'd like to know other's experience as well
The extra handshakes of the extra file can take anywhere from 100ms to a full second extra overhead on the page load once you break having eight files. To me, there is NO legitimate reason to have more than TWO CSS files per media type. You ARE using media type, right? "screen, projection, tv" for large format visual? "handheld" for handheld, "print" for print"? It's part of why most people's naming conventions piss me off... "style.css" - ooh, that's descripting... Style for what? Me, most of my work has three stylesheets - screen.css, handheld.css and print.css - gee, I wonder what those do? Really there's no good reason to have more than one file per media target, I allow two if one or two deep pages have styling it might not be worth bundling to pre-cache for every visitor.