One CSS File or individual CSS files for each page?

Question

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 1

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.

Answer 2

A different suggestion, use multiple style sheets during development and have a mechanism which will merge all the style sheets into a single CSS file for production deployment. This may require some bit of extra coding and some extra scripts to be run before production deployment but would be ideal for both development use and production use. If the process is properly automated (which is not very difficult to achieve) this won't cause any kind of mistakes also.

Answer 3

The main purpose of the style sheet is to allow you to alter the design across all your pages. If you have h1 {color:red;} on each page and later want to change it to blue you would have to edit each page's style sheet. With one style sheet you would be able to change the color and have that reflected over the entire site.

Plus the style sheet will be cached on the user's computer rather than downloaded from each page.

Answer 4

If you want to have a consistent style across all pages in your website, use one stylesheet for all of the common styles. Otherwise, you may find it quite difficult to maintain many stylesheets. Changes would have to be added to every one of multiple stylesheets.

Stylesheets that are used only on a single page could go in separate stylesheets. This might be most useful for large single-page stylesheets and/or stylesheets for infrequently-accessed web pages.

Your stylesheets will not be reloaded on every page refresh. If you reference the large, general-purpose stylesheet on your home page, it will only be downloaded once, and cached for future use.

Answer 5

"For loading purposes, wouldn't you want a smaller stylesheet, therefor making individual ones is a better practice?"

This can have a reverse effect, as using 1 stylesheet it can be cached and then re-loaded with ease, whereas it is constantly loading a new CSS file for each page with your method.

Most sites do not need to have more than one stylesheet for one type of media. However if your site drastically varies in design I would suggest having a base stylesheet which has all the common properties, and then a secondary stylesheet for each of the pages which contains the differences.

This should only be used if the CSS changes are large enough in size to warrant the use of seperate stylesheets.

Answer 6

Since I'm actually an actual web programmer (Java's web programming stuff, not scripting such as PHP) I have to give you an opinion I've never seen any actual web designer give:

Please go ahead and split your CSS files to multiple, logical partitions wherever possible! If you have a hugely stylized table, collect its CSS stuff to one file, also collect the base stylings of the actual page to another file, add those menu navigation CSS:s to third one and so on and so forth. You can of course reuse individual CSS:s where they're relevant but DO NOT just cram everything into one big file!

Answer 7

I came across this thread seeking the same question.. My thought was to structure like this..

Layout.css <--- for structure of the site, links, headings etc that are common across the site. form.css <-- generic form styles reset.css <-- all the document resets if you use them

and currently I use pages.css for all page styles..

or

homepage.css about.css gallery.css