I had this problem forever as well, and finally decided that we shouldn't be editing things in the web inspector and built something for it (https://github.com/viatropos/design.io).
A better solution:
The browser automatically reflects CSS changes without reloading when you press save in your text editor.
The main reason we're editing css in the web inspector (I use webkit, but FireBug is along the same lines) is because we need to make small adjustments, and it takes too long to reload the page.
There are 2 main problems with this approach. First, you're allowed to edit an individual element that may not have an id selector. So even if you were able to copy/paste the generated CSS from the web inspector, it would have to generate an id to scope the css. Something like:
#element-127 {
background: red;
}
That would start making your css a mess.
You could get around that by only changing styles for an existing selector (the .space class selector in the webkit inspector image below).
Still though, the second problem. The interface to that thing is pretty rough, it's hard to make big changes - like if you want to try real quick copying this block of css to this place, or whatever.
I'd rather just stick to TextMate.
The ideal would be to just write the CSS in your text editor and have the browser reflect the changes without reloading the page. This way you'd be writing your final css as you're making the little changes.
The next level would be to write in a dynamic CSS language, like Stylus, Less, SCSS, etc, and have that update the browser with the generated CSS. This way you could start creating mixins like box-shadow(), that abstracted away the complexities, which the web inspector definitely couldn't do.
There's a few things out there that kind of do this, but nothing really streamlining it in my opinion.
- LiveReload: pushes css to browser without refreshing when you press save, but it's a mac app, so it'd be difficult to customize.
- CodeKit: also a mac app, but it refreshes the browser every time you save.
Not having the ability to easily customize the way these work is the main reason I didn't use them.
I put together https://github.com/viatropos/design.io specifically to solve this problem, and make it so:
- The browser reflects the css/js/html/etc anytime you save, without reloading the page
- It can handle any template/language/framework (Stylus, Less, CoffeeScript, Jade, Haml, etc.)
- It's written in JavaScript, and you can whip together extensions real quick in JavaScript.
This way, when you need to make those little changes to CSS, you can say, set background color, press save, see nope, not quite, adjust the hue by 10, save, nope, adjust by 5, save, looks good.
The way it works is by watching whenever you save a file (at the os level), processing the file (this is where the extensions work), and pushing the data to the browser through websockets, which are then handled (the client side of the extension).
Not to plug or anything, but I struggled with this issue for a long ass time.
Hope that helps.
