One CSS file vs multiple for different pages

Question

I have a site where all the pages have the same header and footer, but vary in between on content. I'd estimate that 30% of the CSS is common to all the pages, with 70% varying.

What are the relative advantages and disadvantage of using one CSS file vs multiple for different pages?

Answer 1

Advantages of one CSS file

• Only one HTTP request is needed to fetch it, which improves the first page load time for most users and will speed up subsequent page loads, especially if users are expected to visit more than one different page type during their visit. This can also decrease server load.

Advantages of multiple CSS files

• Reduces bandwidth, particularly if any given user is not likely to view many of the different page types on your site during their visit (which may be the case if your site is divided into almost completely unrelated sub-sites). Note that multiple CSS files will increase HTTP requests, which despite bandwidth savings may actually decrease load speed on modern connections.

I'm generally in favour of having a single CSS file for a site in most cases.

Answer 2

Multiple CSS files requires multiple requests to retrieve the files from your servers -- this can introduce extra latency before the client can render the pages. A single CSS file would involve less latency and may allow your site to render that much faster.

The benefits of a single CSS file grow as client latency speeds increase -- so high-latency modems and cell phones would probably benefit more than broadband-connected computers.

Answer 3

I agree with the other answers that one file is generally better, and I'll add that in my experience, after minification and gzip (you are doing both, right?) no CSS I've ever served has been more than a handful of kilobytes. CSS files can get physically long in terms of # of lines of source, but when you crunch them down they are quite compact (and there's just not as much text there are you may think).

It's one of those things where optimizing CSS by breaking it out across pages can be done, but there are so many bigger things that you can spend your time optimizing that it's really hard to justify the effort there.