Menu
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?
764
you should keep only one css file. Let me tell you in simple one line, once your website loads in client web browser the static resource can be cached that helped your website to boost and number of web request can be reduce when user browse multiple pages of your website.
Having only one CSS file is better for the loading-time of your pages, as it means less HTTP requests.
Yes, It is possible to include one CSS file in another and it can be done multiple times. Also, import multiple CSS files in the main HTML file or in the main CSS file. It can be done by using @import keyword.
A site with only a few pages likely only needs one CSS file. Even if it has a few pages with different template, as long as those templates are fairly similar it can be all rolled together. Even sites with hundreds or thousands of pages can often get away with a single CSS file if the pages are largely the same.
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.
76
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.
20
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.
4
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.
4
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
