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