Backfire : Save css changes made in firebug

Why I don't like this kind of solution (yet):<p>I like to mess around in my CSS loads, trying different combinations, <i>trying whether a property has an actual effect on the appearance/flow of the page</i>, etc.<p>I like to then make changes that have been throughly tested inside vim, :w, CMD-TAB, CMD-SHIFT-R.<p>By separating experimentation and editing, I know exactly what is added to my CSS, without having to think about whether or not all in-browser changes are truly necessary for my purpose. I bet use of these kinds of extensions by inexperienced web-designers (togglers we might call them) will lead to extremely ugly and bloated stylesheets.

You can already do this in Chrome without doing anything (in Google fashion, though, the UI isn't very intuitive).<p>Check Paul Irish's Chrome Dev Tools talk from JSConf 2011 for that and other tips.

If you want to save the changes on the client side for when you're debugging, try the Stylebot Chrome extension: <a href="https://chrome.google.com/webstore/detail/oiaejidbmkiecgbjeifoejpgmdaleoha" rel="nofollow">https://chrome.google.com/webstore/detail/oiaejidbmkiecgbjei...</a><p>The up side: You can immediately use it with any of your sites. No setting up required. The down side: It works on top of your existing CSS and you'll still need to copy/paste the CSS into your live version.

In case anyone han't come across CSSEdit before, you can pull in a page, live edit and it reloads the stylesheet on every keystroke. Features autocomplete and has a pretty decent inspector

too bad it doesn't help if you are doing any kind of server side css processing. sass, less, or even just combining css into a single file.

There is a similar tool called <a href="http://code.google.com/p/css-x-fire/" rel="nofollow">http://code.google.com/p/css-x-fire/</a> which allows you to take the firebug changes and then selectivly apply then into PHP Storm IDE.