Combining Multiple page CSS into a single file

Question

What if i combine all the CSS of the complete site into a single file. would it be cached by the browser or be reloaded every single time a new page is opened. the single css file contains different values for different pages. should i divide the css for different pages or keep it in a single file?

Answer 1

Generally speaking, combining your CSS into a single file is a good practice for production servers. The single file reduces the number of http requests required and, in both cases (single or mutiple files) caching will be used.

The benefit of fewer http requests is greatest for first time visitors.

Also, you reduce the number of requests required on subsequent pages as the file will have been cached. (think of it as pre-loading the css if the portions unused on the current page seems wasteful to you)

Answer 2

Most sane browsers will cache CSS files, so compacting them down into a single file can help a little when it comes to request times. However, maintainability is also an issue - if you have difficulty maintaining the CSS code when it's all in a single file, you may still want to stick with separate files.

In the end it's up to you, whatever feels best.

Answer 3

There’s nothing wrong with the multiple css files, but if load time is an issue you could save yourself a server request by combining your CSS files.

Answer 4

It is is good to have one file. Please see for the file size also that might affect the page load time. All browser catch the css files. Next time it will not load new one.

Please use the yahoo info for that.

Answer 5

Combining CSS files into one will give you better performance. You can compare this in FireBug( https://addons.mozilla.org/en-US/firefox/addon/1843 ) in FireFox.

If you use asp.net have a look at the ScriptReferenceProfiler, it shows the list of downloaded resources, these can be combined to improve performance: see blog: http://blogs.msdn.com/mikeormond/archive/2008/06/26/asp-net-ajax-scriptreferenceprofiler.aspx

Answer 6

Yes the files are probably better of combined but will only be cached if the correct headers are set. I suggest downloading YSlow (or Page Speed) which is a plugin for firebug which analyses your page and shows how it is slow and gives advice on how to improve it.

http://developer.yahoo.com/yslow/

Also look at css minification tools like those in the YUI toolkit to compress the css code as well as combining the files.

http://developer.yahoo.com/yui/compressor/

Answer 7

Web Resource Optimizer for Java (wro4j) - http://code.google.com/p/wro4j/wiki/GettingStarted is created exactly for this. It can help you to keep your resources (javascripts & css) organized in a single xml, describing how you want to group them and get the merged and minimized version of it using a single request.

Also, wro4j is very configurable and has a lot of bonus features like: extensibility, easy of configuration, css variables support, runtime configuration, maven plugin for build time processing & many others.