Firebug-esque CSS editor

Question

Here's my current workflow for editing CSS:

1. Me: "Take a look at this page!"
2. Guys: "Try making the post titles bigger"
3. Right click on a post title, choose "inspect" (to inspect it in firebug)
4. Find the appropriate CSS statement in Firebug (h2.post_title or something)
5. Modify the CSS in Firebug, ask friends how it looks
6. If it looks good, make the change again in Textmate

I want to avoid step 6. I.e., I want the ability to edit CSS via a Firebug-like UI and be able to commit my changes to the relevant file immediately (rather than having to copy them by hand as I do with Firebug)

Edit: Something that works on a Mac would be ideal

Answer 1

Have you tried "Web Developer" extension in Firefox? It allows you to open, edit and save CSS files.

Answer 2

Check out Backfire:

http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/

Haven't tried it, but sounds promising.

Answer 3

Another possible workflow:

1. "Hey guys, take a look at this page!"
2. "Try making the post titles bigger"
3. Make the change to the CSS file
4. Hit reload

I only use Firebug for debugging (eg: "why is this thing getting that style?") not for making changes when I know where they need to go in the CSS. This workflow does depend somewhat on being able to reload the CSS easily. If you're working on an app where hitting reload completely disrupts your state it might not be ideal.

Answer 4

Check out my contribution to this problem: http://www.cssupdater.com

Step 6 would then be: 6: One click on the "Sync now" button in Firebug!!

The click sends your changes to the desktop application, which syncs your orignal css files. You can also choose the changes you want to sync in the application. It works with your favorite text editor or IDE and on both Windows and Mac!

Heureka?