Grow your CSS skills. Land your dream job.

Reviews of Mac CSS Editors

Published by Chris Coyier

There is some very nice software out there for creating and editing CSS files. Since I'm mostly a Mac guy, this review is Mac focused, but I would love to hear about Windows CSS editors if anyone has anything to share. It's all about the best tool for the job, after all.

Xyle Scope
xylescope.jpg
Available from Cultured Code for $19.95.

Xyle Scope takes the approach of a completely visual CSS editor. Essentially it's a web browser that enables you to select elements right on the page. The sidebar of the window will "drill-down" and display the HTML and CSS of whatever element you have selected. You are able to make edits right on the fly and see their effects. This is a very powerful feature and is an awesome tool for troubleshooting borked layouts. In fact, Xyle Scope has become my go-to tool for quick troubleshooting.

xylescopewindow.png

Xyle Scope has a couple of weaknesses. For one, it's not really a "CSS Editor". There is no traditional "code view" and no way to save out CSS that you have edited on a non-local site. This makes it much more a trouble shooting tool than a full blown editor. I think that was kind of the intention, hence "Scope". The other weakness is that it is basically Safari as far as web rendering goes. So troubleshooting is basically limited to an already-decent browser. Even if you make changes and then "Preview" in a different browser, those changes don't hold so it's kind of pointless.

CSS Edit
cssedit.gif
Available from the MacRabbit Store for $29.95.

The biggest strength of CSS Edit is that it is truly a full-blown feature-rich CSS editing powerhouse. The editing window is the best around, featuring a left sidebar of all your selectors, a middle pane of the "code" view, and a right sidebar of a super easy to use click-buttons-to-edit style editor.

3panes.png

Combining all of this into a single editor window is a great move. I don't really like the simplified editors if I can't see what it is actually doing to the code.

CSS Edit is absolutely loaded with cool features like built-in code validation, easy commenting, "grouping" of selectors, search, and milestones management. But what makes CSS Edit great in my opinion is are two big features. Override and Extract.

Override gives you the ability to go to any webpage and start playing around with the CSS right on that site and see the effects. This can be useful on your own sites to do some tweaking and figure out ways to make your site look better, or be used on other people sites to understand their ways and make adjustments. Override is also particularly powerful because it allows you do make edits and changes to CSS that affects dynamic content without having to "go commando".

Extract is similar, it allows you to literally yank the CSS right out of any page on the internet. You can then save it out, and use it however you wish. It's kind of funny to think about. It kind of feels like it could be a copyright violation, but I don't think it is as long as you aren't stealing images along with it. This is a fantastic way to pick apart other peoples techniques and apply then to your own sites. No other software out there makes "extracting" CSS so easy.

The biggest weakness of CSS Edit is that is a full-blown feature-rich CSS editing powerhouse. If you already know what you are doing, sometimes a big heavy application isn't what you want. Personally, CSS Edit is too much for me, and I only really use it for extractions, getting to know really foreign CSS, and sometimes just for fun =).

Firefox w/ Firebug
firebug.jpg
Available for FREE, by Joe Hewitt.

Firebug is a Firefox extension, not independent software. It installs a little icon in the bottom bar of your browser window that is basically in one of two states. A little green checkmark if the page you are viewing is in good shape, or a red X if there are problems with the site. Clicking the icon opens up the editor area.

firebugeditorwindow.png

For being "just a Firefox extension" Firebug is extremely powerful. Much like either of the previous programs, you can go into "inspect" mode which enables you to mouse over page elements and view their HTML and CSS. You can edit EITHER the CSS or the HTML on-the-fly and see the effect on the page. You can view the code in either a drill-down format with little arrows to open and close sections or as-is. You can even view the CSS in "layout" mode so you can see the offset, margin, border, padding and size of any element. I find Firebug amazingly powerful as well as convenient, since you never even have to leave your web browser.

Firebug shares some of the weakness of Xyle Scope. It is limited in it's preview capacity, since it only runs in Firefox. You can't save out your modifications. Because of these things, Firebug is much more of a troubleshooting tool than an actual editor. However, because of Firebug's extra features like DOM analysis, javascript errors and validation Firebug is my troubleshooting tool of choice.

Coda
coda.jpg
Coda is available from Panic for $79.

Coda is the new kid on the block and the big-daddy of web development in my opinion. Coda has a built-in CSS editor much like CSS Edit with the selector area and the click-buttons-to-edit area. There is no split-view for looking at the code at the same time, but it is very easy to pop back and forth between the CSS view and the Edit view.

codacsswindow.png

Coda has nice code-highlighting like the Mac-favorite text editor TextMate. It also sports a built-in preview area for seeing the results of your changes right away. This suites me very well because my preferred CSS editing technique is to look at and edit code in a regular text editor, save it, and see the changes. What really makes Coda shine though is everything else that it does. It is an amazing FTP client with the ability to save your sites in a very visually appealing way. The split-view FTP/Edit Window was a stroke of genius and is the future of web development. It has a terminal program built right in for shell access to your severs. Last but not least, it has reference manuals for HTML, CSS, JavaScript, and PHP built right in for quick lookups.

Coda is beautifully designed an incredibly adaptable and adjustable. For all these reasons Coda is where I spend 90% of my coding time. Cheers to Panic for this home-run product.

Comments

  1. Permalink to comment#

    I too love coda. I really dig how lightweight it is. It opens so fast, and uses a small amount of system resources. Especially compared to Dreamweaver and such.

  2. Hi Chris!

    About Coda:

    There is no split-view for looking at the code at the same time

    That is not true. You can take a look at Coda FAQ page:

    Can I see my source code while editing CSS?

    Absolutely. Open your CSS file, then click the “Split” button to the right of the tabs. Now click in one split, and select the CSS tool. Now you can see both at once!”

    Coda is realy powerful tool :-)

    Very nice blog, thank you!

  3. @Lev: Hi!

    Thanks for pointing that out! Indeed I was wrong. I use Coda all day long and I never knew that. It’s just because I really don’t like using visual editors so I don’t spend much time with them, but that’s good to know and a nice clarification for the readers.

  4. Nehemiah
    Permalink to comment#

    Thanks for the “review” I was just about to ask for your openion on which was best when i remembered what the penny-arcade and hotspot(gamespot podcast) say about reviewers… a score is not the most helpfull. so Thanks for giving me what i need to make a buying decision. I only recently got a gig with an ftp server. does coda do smb? I am trying to get the hang of css and im wondering if coda is what i want or should i just get cssedit and contenue using vim/textWrangler. (or as i call it BBEdit light) I don’t have ssh access to the server im working with, would that make coda’s terminal moot?

  5. Nehemiah
    Permalink to comment#

    subscribing to post respond here … sorry you can get rid of this comment if u want

  6. If you don’t have SSH access than yes, the terminal in Coda is moot. It’s still the best editor out there if you ask me. Even though I like the highlighting and auto-complete stuff in TextMate much more, having the FTP and code editing right inside one application is unstoppable.

    I’m not sure if it does SMB, but I kinda doubt it. That’s a microsoft kinda thing as far as I know.

  7. Michael
    Permalink to comment#

    Looking for a good css editor for the pc. Does anyone know of any?

    Thanks Michael

  8. @Michael

    Looking for a good css editor for the pc. Does anyone know of any?

    Before switching to Mac full time, when I was on the PC, I was using TopStyle for Windows. To be perfectly honest, I wish they’d make a Mac version of it one of these days, but hands down it’s the best XHTML/CSS editor on the PC simply because of it’s simplicity, live previews, and panel previews (seeing both IE and Firefox at the same time).

    I think the Lite version is free and just a simple CSS editor, so it might be worth checking out.

    http://www.newsgator.com/individuals/topstyle/default.aspx

  9. Permalink to comment#

    Totally agree with Chris. Topstyle Pro is the very best CSS editor for Windows. I have been using it for years. They also offer a free Lite version.

  10. Peter
    Permalink to comment#

    My favourite free mac css editor has to be dashcode, i also have the html the css is linked to open in safari so i can see what my changes are.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".