One, Two, or Three

Published by Chris Coyier

That's how many CSS files should be loaded on any website.

One

  • 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.

Obviously, a one page site needs only one CSS file. Any more would be for you, not for the site.

A site with only a few pages likely only needs one CSS file. Even if it has a few pages with different template, as long as those templates are fairly similar it can be all rolled together.

Even sites with hundreds or thousands of pages can often get away with a single CSS file if the pages are largely the same. Even if there are various taxonomies, like a typical blog.

Two

  • 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.

A web app with different rather "siloed" sections probably need two CSS files. One global with the most common design patterns and then a section-specific CSS file with the less common design patterns that section needs.

Sites with many vastly different styles of pages likely need two stylesheets. A global (there are probably some shared elements) and a CSS file specific to the unique pages.

Three

  • Very complex sites that need global CSS, section-specific CSS, and one-off page CSS

Sites that have distinct sections and then sub-templates of that section probably need a global, a section-specific, and a page-specific or one-off CSS file.

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.

For instance:

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.

OK

Now you can troll me for oversimplifying things. =)