9

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

Improve this question
2
  • I was thinking of actually making a web based editor that works like vim which would be embedded in a little frame that would let you do this, haven't ever gotten around to it though. If there's any existing program which works like this in a vimesque way I'd love it. Commented Jan 5, 2010 at 4:22
  • Wow, amazing, it's the same reason that's driving me developing LIVEditor. Commented Jul 11, 2012 at 8:53

8 Answers 8

Reset to default
4

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

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I believe what Horace is looking for is a CSS Editor that would allow you to traverse the DOM and see applied styles (à la Firebug), but also save or export it once done. The closest seems to be Skybound as pointed out by Bryan
I see. Right. Skybound looks nice. Hoping that'll be available on Mac and Linux as well.
3

http://www.skybound.ca/

Go forth and be enlightened. This is truly a life changing program.

Improve this answer

3 Comments

This looks bomb (sadly I need to wait for the mac version)
Oh bummer man! I didn't realize you were on a mac. The good news is that they're working on the mac version: blog.skybound.ca/2009/11/13/… It isn't often that an application completely alters my workflow for the better, but holy crap, Stylizer has made my CSS development WAY cleaner and faster.
The mac version of Stylizer is now available.
2

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.

Improve this answer

3 Comments

But how do you know the right place in the CSS file to edit? I.e., don't you have to inspect the element in Firebug first to find the relevant selector? Also, as you say, reloading the page is a pain in the ass (it's nice to see your change immediately)
It depends. Most of the times you know where the element exists in the code, so you go there, see what classes it has, and then search for the appropriate class in the CSS. When it gets trickier than that I do use Firebug, but only in that case.
That isn't to say that something that combined the two would be great. I'm just describing how I deal with reality. :-)
1

Check out Backfire:

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

Haven't tried it, but sounds promising.

Improve this answer

Comments

1

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?

Improve this answer

Comments

0

XRefresh with "Soft Refresh" enabled may help your workflow, but you still need to know what CSS selectors do you want to add/edit.

Improve this answer

Comments

0

What's why I'm developing LIVEditor, because I don't want to manually redo the change again in the text editor after tweaking my css styles in Firebug (or the likes).

Improve this answer

Comments

-1

Backfire (see post below) was created specifically for Quplo (http://quplo.com), which is a tool that specificly does what you describe. You write html and css, then talk about what needs to be changed, make the changes (using firebug or web developer toolbar) and hit save.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.