One, Two, or Three
Published by Chris Coyier
That's how many CSS files should be loaded on any website.
- A one-page site.
- A fairly simple site with just a couple of pages that aren't too different.
- A blog or blog-like site, where even if there are 1000's of pages and taxonomies, they look mostly the same.
- A web app with a global set of design patterns, and then lesser-used design patterns on different sections of the site.
- Content heavy site with a global set of structure, grid and typography and then additional CSS loaded for specific sections of site that need more.
- Sites where every page is very unique (global and page-specific CSS).
- Most sites.
- Very complex sites that need global CSS, section-specific CSS, and one-off page CSS
I'm proposing that three is the most CSS files that any page needs.
This is deployed CSS
When I say one, two, or three, I'm talking about CSS files linked to from the head of deployed websites. I'm not talking about the CSS files you edit as a developer. For that, you should work in whatever modular chunks make sense to you. Then those modular chunks get combined into the final set of deployed files. You can do this with things like the Rails Asset Pipeline, using a CSS preprocessor, or with apps like CodeKit.
Global = main.css + grid.css + typography.css + buttons.css + print.css
Site section A = tabs.css + editor.css
Site section B = forms.css + video.css + details.css
What gets loaded on "editor" part of site = global.css & site-section-a.css
What gets loaded on "details" part of site = global.css & site-section-b.css
Isn't one always better?
No. If you are thinking of creating a page-specific CSS file and somehow concatenating the parts it needs into that single file, don't. It seems like, hey, one request is better than three! But then you aren't leveraging the browser cache at all.
Let's say you are in a typical two-stylesheet scenario. As you browse around within a particular section of a site, all those page loads after the first need to load no CSS files at all, as they are already cached. And even jumping into a new section will only need to load one new file (the global is already cached).
If you make a unique CSS file for each page, users will need to request a new stylesheet for each page they visit.
Now you can troll me for oversimplifying things. =)