CODEWITHSUNDEEP
css
Ben G
Ben G

Reputation: 26771

One CSS file vs multiple for different pages

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?

Upvotes: 6

Views: 3721

Answers (4)

Jan Żankowski
Jan Żankowski

Reputation: 8951

Adding to the accepted answer:

Advantages of multiple CSS files

Better code organization - easier to navigate them and know that changes don't affect pages other than the one you're working on.

Upvotes: 0

Brian Moeskau
Brian Moeskau

Reputation: 20429

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.

Upvotes: 1

thomasrutter
thomasrutter

Reputation: 117343

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.

Upvotes: 7

sarnold
sarnold

Reputation: 104050

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.

Upvotes: 1

Related Questions