How to evolve a stylesheet

An HTML page depends on images, stylesheets, and javascripts. These resources don't change often, and so browsers and proxies ought to cache them fairly aggressively. But when you do make a change, you can get burned: your new markup will probably look very bad styled with your old, cached CSS. So how do you gracefully evolve a stylesheet? It's easy:

1. Change the URL every time. I use names like main.1.css, and I increment the integer with each roll-out. Don't forget to change the links in your dependent files. Now anyone who gets the new markup will also get the new dependencies.
   
   
2. Keep old versions around. If someone has your old HTML cached, then they will need the old dependencies as well. Leave them around for a year or so.
   

Follow these two practices, and you'll be safe from cache bite-back.

You'll be encouraged to know that flickr uses similar techniques (see esp. "Caching is your best friend"), though their setup is more complex. Most of their gymnastics are to avoid manually changing links to dependent files. First: how many do they really have, I wonder? Second, there are other ways to automate this. Here's a little command-line recipe using find and sed, which does a regexp replacement in all .html files below the current directory:

find . -name \*.html \
       -exec sed -e 's/main\.1\.css/main\.2\.css/g' \
                 -i '' {} \;

(It's a good idea to make sure your work is checked in before running this command, because then it's easier to revert if you screw up.)

Also, I don't see that flickr handles case #2 above, because they use mod_rewrite to always serve only the latest resource regardless of version number. Don't users still need the old stylesheet until their cache of the HTML expires? Feed back to Chad Whitacre.