

Backfire : Save css changes made in firebug - amritayannayak
http://blog.handcraft.com/2010/08/backfire-save-css-changes-made-in-firebug/

======
BasDirks
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.

~~~
rlander
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.

~~~
BasDirks
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.

------
mikemaccana
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.

~~~
evilduck
For the lazy: [http://paulirish.com/2011/a-re-introduction-to-the-chrome-
de...](http://paulirish.com/2011/a-re-introduction-to-the-chrome-developer-
tools/)

(edit: around the 8:30 mark)

------
_ankit_
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...](https://chrome.google.com/webstore/detail/oiaejidbmkiecgbjeifoejpgmdaleoha)

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.

------
tombot
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

------
Vitaly
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.

------
willmacdonald
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.

