One CSS File or individual CSS files for each page?

css stylesheet
JCHASE11 picture JCHASE11 · Nov 28, 2009 · Viewed 33.9k times · Source

When I am building pages, do I want to have individual stylesheets for each page or one large stylesheet for the entire site? For loading purposes, wouldn't individual files be a better practice because it would be less total css on load?

Answer

Ben Everard picture Ben Everard · Nov 28, 2009

Use a single file, CSS files are cached and therefore reduce the need to download a new file for each new page visited.

To help, I usually slap my CSS through a CSS cleaner to reduce its file size, additionally you can GZip CSS using .htaccess too, making it smaller yet again.

Finally putting all CSS in a single file will make making system wide changes to presentation easier in the future (the entire reason we use CSS in the first place), it will also make debugging easier.

Edit, May 2017

A lot has changed in 7+ years, and anyone looking at this answer should consider researching newer asset delivery methods, especially now use of HTTP2 and preprocessors are more commonplace.

Related questions

Can you use if/else conditions in CSS?

I would like to use conditions in my CSS. The idea is that I have a variable that I replace when the site is run to generate the right style-sheet. I want it so that according to this variable the …

Read More
How to use HTML to print header and footer on every printed page of a document?

Is it possible to print HTML pages with custom headers and footers on each printed page? I'd like to add the word "UNCLASSIFIED" in Red, Arial, size 16pt to the top and bottom of every printed page, regardless of the …

Read More
How can I make a TextArea 100% width without overflowing when padding is present in CSS?

I have the following CSS and HTML snippet being rendered. Is the problem is that the text area ends up being 8px wider (2px for border + 6px for padding) than the parent. Is there a way to continue to use …

Read More