Backfire : Save css changes made in firebug | Hacker News Reader

Backfire : Save css changes made in firebug

blog.handcraft.com

Why I don't like this kind of solution (yet):

I like to mess around in my CSS loads, trying different combinations, trying whether a property has an actual effect on the appearance/flow of the page, etc.

I like to then make changes that have been throughly tested inside vim, :w, CMD-TAB, CMD-SHIFT-R.

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.

Unless you accidentally close or reload the browser window (or there's a power failure). This has happened to me more times than I care to remember.

I create a "task" (you can do this with any todo app, but I use taskwarrior) for every change I make to my css, ie: "more appropriate top margin @ index". Then I solve exactly that problem, change the selectors/properties I need in my stylesheet, and review the solution (to see if other rules are affected or overwritten).

define problem -> solve problem -> refine solution -> commit/save changes.

might sounds slow, but really isn't, and keeps things clean.

You can already do this in Chrome without doing anything (in Google fashion, though, the UI isn't very intuitive).

Check Paul Irish's Chrome Dev Tools talk from JSConf 2011 for that and other tips.

For the lazy: http://paulirish.com/2011/a-re-introduction-to-the-chrome-de...

(edit: around the 8:30 mark)

Not when we made this, you couldn't ;-)

If you want to save the changes on the client side for when you're debugging, try the Stylebot Chrome extension: https://chrome.google.com/webstore/detail/oiaejidbmkiecgbjei...

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 http://code.google.com/p/css-x-fire/ which allows you to take the firebug changes and then selectivly apply then into PHP Storm IDE.

Reply on news.ycombinator.com