I would like to separate body, layou,t colors, and header/nav css into 4 separate files. Is that too many? I don't want to kill site performance.
Why ever would you want to create a debugging and maintenance nightmare? For any given selector, your plan means you need to look in several files to see what's going on. Trust me; I've made a living fixing other people's sites, and I can tell you your plan is about as bad as it gets. Do you not understand the cascade in Cascading Style Sheets? Organize your styles sheet/s/ contextually, top down. cheers, gary
My 'rule of thumb' is two per media target -- "all" pages, and "current" page IF there is enough CSS to warrant it... which in most cases if there's enough CSS to warrant a separate file for a specific page, there's something wrong with that page. In fact, separating out specific pages can cost you more if pages are revisited or updated frequently -- by keeping the CSS for all pages in a single file can in fact be leveraged to pre-cache subpages appearance; therein speeding up the loading of said subpages. Admittedly this is more useful if you have real visitors, instead of just bounces -- but shouldn't that be the goal anyways? Splitting up the bits you are thinking just increases the number of files and as you suspect, is a drain on performance, when there's really no need for it. If you keep the CSS in the general order it appears on the page for the 'template' part (head, menu, footer, column structure), then list the 'content' parts that are unique to each page as you build them, using semantic markup and semantic classes/ID's to describe what it is you are applying style to -- avoiding idiotic BS like 'frameworks' or 'OOCSS' and not sleazing out 1990's style code -- I fail to see why you'd even need to split them into separate files to begin with. This is especially true when most websites only need around 8 to 12k of CSS, and at most 40k; which of course is why most people seem to throw 100k or more at things for Christmas only knows what. Of course, it also helps if you give your CSS files meaningful names instead of pointless gibberish like 'style.css' Really, for most websites, the MOST you should have for CSS is: "screen.css" -- for media="screen,projection,tv" "print.css" -- for media="print" DONE... Though there is one more you MIGHT use: "handheld.css" -- for media="handheld, screen and (max-width:480px)" Since most browsers that use 'handheld' mix it with screen (opera mobile and blazer on really narrow displays) -- and increasingly I don't bother with 'handheld' anymore and instead put my media queries in the screen.css; I'm dropping support for older/less capable handhelds the same way most people have dropped support for older versions of IE. In most cases I wouldn't even CONSIDER separating color from the element/layout declarations -- keeping things together in one place makes it EASIER to maintain since, well... you only have to look in one place. In those rare, rare, rare cases where you might want to speed making multiple skins for something like a CMS I might CONSIDER making a separate stylesheet for it, but again if you have enough CSS that finding an element and it's color and making a complete separate file for each 'skin' is an issue, there's probably something wrong with the markup, CSS, or design of the page.
Why the hell would you do that? Stick it all into one if they're all related to one thing. If you make something that's completely unrelated to the other pages, then make a new styling sheet.