6

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?

Improve this question

4 Answers 4

Reset to default
7

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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.

Improve this answer

Comments

1

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.

Improve this answer

1 Comment

In this case, my teammate says that it's easier to code out the CSS in separate files, just because he get's less confused that way..
0

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.