Best practices - Only download CSS you need, or use a minification process?

Question

In the context of improving overall site performance (downloading and rendering speed) there appears to be a contradiction between the following two best practices:

Answer 1

Like always both cases are valid.

Your solution has to go with benchmarking your costumers.

But I would probably stick to just one css file for as long as I possible could. And if your site grows into such an extravagant size were you need two different files try to use them in two very different site sections site_general and logged_in for example.

Nevertheless, some things may help you:

• compress css with YUI Compressor (gives me the best results)
• have apache (or whatever) deflate your css files
• and the most important of all, make sure the file is cached by the user!

Keep CSS Clean

One thing you may find useful after having several developing runs on a site is Dust-Me Selectors a Firefox extension that covers your site for unused selectors.

Use Selectors Wisely (render speed!)

Probably all selector engines go from right to left making .parent div.myclass faster than div.parent .myclass. When writting your CSS keep this in mind. Also remember that ID's # are much faster than classes. Apart from that it's the usual, avoid universal selectors, don't hover on non link elements, ... Google has a great article on it.

On top of that run Firefox's Extension - Page Speed that gives you a very detailed info on slow selectors and much, much more.

Apache Deflating Example deflating is smaller than gzipping as Jeff so kindly put for us on his blog.

LoadModule deflate_module modules/mod_deflate.so

    SetOutputFilter DEFLATE

Apache Caching Example

# Set up caching on media files for 1 month as recommended by page speed

    ExpiresDefault A2629744
    Header append Cache-Control "public, proxy-revalidate"
    Header append Vary "Accept-Encoding: *"

Hope it helps!