Live CSS Editing

If you code CSS like I do, you’re spending way too much time in Chrome’s Developer Tools pushing the up-and-down arrow keys.  The problem is that when you’ve changed a thousand styles, and you’re just starting to feel good about what you’ve accomplished today, your pesky fingers kick the Cmd+R combo and voila! your changes are gone.  Congratulations!

My first inkling was to try out a web service.  I quickly found sites like ScratchPad and CSSizer, and JSFiddle.  These guys are awesome, no doubt, but I’m lazy.  I don’t want to have to copy-pasta my code everywhere!

So I turned to proprietary apps, like the $60 Stylizer.   They’ve been taking the Windows side by storm, but I wasn’t impressed by the Mac side.

Then, this fantastic blog told me about a magical place in Google Chrome that saves your editing history for stylesheets.  Chrome’s Help pages even outlined it.  Sadly, that feature is either from a particular build (that blog post was from 2 years ago) or has since been broken.

So… Coda it is!  Coda provides a way to preview CSS changes realtime.  My only gripe so far has been that if you edit a CSS document that contains an @import statement, the @import is ignored! Sad day, but easy enough to work around for now!