I’ve wanted to scratch this itch for a while, and this morning I decided to steal a few hours to give it a shot. Most of my CSS authoring and editing takes place in Firefox, using Web Developer Toolbar. For me, seeing CSS rendered in real-time is the only way to write it. (This is one reason I had to pass on Sass, even though I love Haml, but that’s a topic for another time.)

This has come major shortcomings, though, since Web Developer Toolbar is not intended to be a text editor (nor should it be). The biggest pain is saving your changes. A save button is provided, but you have to navigate through your filesystem to find the right location. If you’re lucky this location will be remembered next time you save. Support for find and undo is shaky at best, and as a Vim user, there about a thousand other features that I “need” in my text editor.

The other problem with Web Developer Toolbar is that it is Firefox-specific. On days that I have to debug my CSS in IE (my “hating life” days), I’m back to the refresh button.

Today I may have found a solution.

I say “may” because I literally just wrote this. I’ve tested it a little bit, but I can’t claim to have used it for real project work. Nonetheless, I’m pretty damn excited. Twenty minutes ago I had three browsers open (IE, Safari, and Firefox), and saw all three of them update as I saved my CSS file in Vim.

Check it out on Github and let me know what you think. As long as you’re using jQuery, using it is as simple as dropping in the .js file and calling $.autoUpdateStylesheets.

My next steps are to pull this into a bookmarklet and remove the jQuery dependency. Then it’s just a matter of pushing a button and editing away in your favorite text editor. Enjoy.

(oh, and this should work with Sass, too, so I guess it’s time for me to take another look.)