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!