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 you want a smaller stylesheet, therefor making individual ones is a better practice?
+10
A:
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.
ILMV
2009-11-28 18:53:34
To avoid having to use too many unique ids and classes to achieve a stylesheet which contains all teh styles for your site it's also a good idea to add a class to the body of each page indicating which page it is i.e <body class="productPage"> will enable you to use the same classes and ids on each page. eg using the above technique you can give the content area on the page a different style by using .productPage #contentArea, so you won't have to put a new id #productPage_contentArea in the page's html.
wheresrhys
2009-11-28 22:19:07
+3
A:
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.
DrGlass
2009-11-28 18:57:36
+3
A:
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.
DOK
2009-11-28 18:58:16
A:
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!
Esko
2009-11-28 19:01:39
I can agree with you, but reducing http requests is valuable, so you still want to concatenate all those css files before you deliver them to the client
Jiaaro
2009-11-28 19:10:47
+1
A:
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.
Shailesh Kumar
2009-11-28 19:32:35
+1
A:
"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.
Thomas
2009-11-28 19:39:05
A:
The major component of download time is not the base HTML file itself, but the number of subsequent HTTP requests to load the page’s supporting files - CSS, JavaScript, images, etc. Each of those are extra HTTP requests, and each unique request takes a relatively long time. The fewer requests to the server that the browser has to make, the faster the page will load.
You can use tools like Ant or Make to do as Shailesh Kumar suggests.
Take a look at this example, it's not that hard.
Samuel Santos
2009-11-29 03:45:51