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

There is always trade-offs. If you find yourself making many CSS files and there are too many dependencies such that tracking which CSS file to inlcude becomes difficult, it would be better to make one (or at most two) CSS files and minify them. Hopefully your CSS files are not crazy-big.

Answer 2

1. You should use Gzip

alt text http://shup.com/Shup/376348/1106472221-My-Desktop.png

http://www.fiftyfoureleven.com/weblog/web-development/css/the-definitive-css-gzip-method

http://paulstamatiou.com/how-to-optimize-your-css-even-more

For asp.net

http://web2asp.net/2009/01/introduction-one-of-big-complaints.html

Edit:

2. And write CSS selectors efficiently

http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors

http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

https://developer.mozilla.org/en/Writing_Efficient_CSS

3. And combining

http://rakaz.nl/2006/12/make-your-pages-load-faster-by-combining-and-compressing-javascript-and-css-files.html

RewriteEngine On
RewriteBase /
RewriteRule ^css/(.*\.css) /combine.php?type=css&files=$1
RewriteRule ^javascript/(.*\.js) /combine.php?type=javascript&files=$1

4. Read suggestion from answers of this question CSS Performance issues

---

I don't like to have multiple CSS files for each page. 4-5 css files is enough.

1. Common.css (with reset and common layout and typography and Form styling)
2. pagespecific.css (css of home and other landing pages)
3. print.css
<---- ie only css --- >
4. ie6.css
5. ie7.css
<--- >

And stripping white space from CSS will make edit hard through FTP.

Here is a good article on one css or multiple css http://css-tricks.com/unique-pages-unique-css-files/

Answer 3

This is a very nice view Mr.Jonathaxxx..

Yes I agree with you, the above both point you bring are major point. My one comment regarding your first point which is..

1. You should only bring down the CSS that you need for the page being viewed. (Because too many CSS rules slows down rendering).

I think we can achieve this as well.

In web application we would have a common skeleton for all views of the apps. We can say it Master page. All of our different pages/views are adopting from it. So there is a common look and feel between all pages. In that case why we can not make one style sheet only for that. So it can be shared among all pages/views. This can be a layout file.

This is one CSS file.

Next, we can generate another CSS for controls in the page or we can link the control's styles also in layout CSS file.

After any styles what different pages might get, we can have a different file for them. This will not increase the amount of CSS files for a single page. Maximum a page will get 2 or 3 style sheets which are completely relevant.

[EDIT]

Default CSS file would be always cached and would be used among all pages/views of the application.

Answer 4

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
<FilesMatch "\.(js|css|html|htm|php|xml)$">
    SetOutputFilter DEFLATE
</FilesMatch>

Apache Caching Example

# Set up caching on media files for 1 month as recommended by page speed
<FilesMatch "\.(gif|jpg|jpeg|png|swf|js|css)$">
    ExpiresDefault A2629744
    Header append Cache-Control "public, proxy-revalidate"
    Header append Vary "Accept-Encoding: *"
</FilesMatch>

Hope it helps!