I have a lot of CSS on my site, and I was wondering if it is normal to keep all the CSS in one file. There is a large chunk of the CSS that is needed by all the pages on my site (for navigation, etc.), but there are some parts that are only needed on certain pages. Is it usual in this situation to have all the CSS in one large file, or to split it up so that each page includes the "core" file that every page needs and then includes a separate file with CSS rules specific to that page. Will either approach be faster?
I'm not aware of it being faster... but it will certainly be easier to manager for the webmaster. There can be some truly massive css pages out there if they weren't broken down into manageable separate files.
There´s no point in making a page load a good chunk of css it´s not needing, so, yes, it´s a good practice to split your css files in smaller bits and load the main.css with all your pages and the extra chunks only with the pages that need it/them.
Good rule of thumb is that a well written layout should have under 12k of CSS 'baseline' for one page, and it should go up 0-3k per extra 'page' that shares that style. As to breaking it up into smaller files - unless you are pushing over 60k of CSS (in which case you probably are doing SOMETHING wrong) it's a really bad idea. Loading the full file is 'precaching' CSS for other pages on your site, meaning you are sacrificing a second or two on the first load to have the subsequent pages load lickity split. Hell, the heaviest site I maintain is only 20k of CSS. If you are going to split into separate files, do so by media type and a 'common.css' - and land sakes name the css file something meaningful like screen.css, print.css, handheld.css, etc, etc. "style.css"? "Main.css"? Could we get a little more vague? You want real dividends keep as much as possible in the CSS targeting the media you are using - then do this crazy thing, PUT YOUR CSS IN THE SAME ORDER IT FIRST APPEARS IN THE HTML!!! Oh, and while we're at it, don't separate FAC from positioning, use meaningful classnames/ID's, (.qv88 is NOT a meaningful classname), and don't fall into the trap of this nonsense: <div class="center font12px bold justified"> because that is NOT separation of presentation from content - the entire POINT of using CSS in the first place.
Thanks guys. And thanks for the numbers, deathshadow. I think I'll be ok for speed to keep it in the same file, but if it gets hard to handle then I'll split it.
Meh, 238 lines of CSS is FAR from big. You need to use the universal reset and shorthands, could probably knock off 30 or so lines using that. border:1px solid black; instead of border-width, border-style, border-color. margin:TOP RIGHT BOTTOM LEFT instead of -left, -right, -bottom, -top (same for padding) You should also have a better distinction of where your different sections are, instead of : /* Begin heading */ (isnt it a header? not heading?) I would do /* Navigation (top vertical) -------------------------------------- -----------------------------------*/ /* Content (bottom right) -------------------------------------- -----------------------------------*/ Or something like that. You could also use imports for different sections... but yours isn't that long so you shouldn't worry.
Thanks for that, soulscratch. I do need to use the universal shorthands - I've never been able to remember them, which is why I haven't used them I though it was too long because I used one of those sites that looks at your web page to tell you what's inefficient about it - and it said the CSS was too long. I guess it was wrong, or paranoid. It's good to know that you guys don't think it's too long.
Actually, I'd just follow the HTML sourcecode order with my stylesheet. I have a two column layout that does this which you can see at dan-schulz.com/temp/2columnlayout/ (feel free to use it for your own work - it will be released to the public domain when my site goes live next month).