MacRabbit's CSSEdit 1.7: Convenient Near-WYSIWYG Cascading Stylesheet Editing for Mac OS X

reviewed by Mike Swope

If You Design or Develop with CSS...

You've gotta get CSSEdit. There's no question about it. It's hands-down the best CSS editing application available for Macintosh. Don't even read the rest of this review. Just go buy it!

But if you feel compelled to finish this review...read on.

CSSEdit - Dreamweaver or GoLive for CSS Stylesheets (But Better)

I'm no novice to CSS or to stylesheets. I'm a prosumer, a freelance web/graphic designer who builds several web sites a year while maintaining existing web sites (worked in a corporate environment doing same for nearly 9 years). CSS is the holy grail for web development in many ways, but looking at a page of CSS code can get...well...dull. After looking at a page of CSS code for hours, every line begins to look the same. I suspect it's the same for millions of other web designers just like me. It's not enough to view and edit the code. We also have to remember hundreds of combinations to write new code, and frequently some kind of reference. Then we have to switch back and forth to preview what we've done to judge the results.

CSSEdit relieves this dullness and writes CSS code in a near-WYSIWYG environment while still allowing access to raw code. It can be compared to Dreamweaver or GoLive for CSS stylesheets. Though Dreamweaver and GoLive feature built-in CSS editors, CSSEdit is better than both. Even if you use a WYSIWYG HTML editor like Dreamweaver, GoLive or FrontPage, you'll find CSSEdit more than useful. MacRabbit developers have studied how CSS coders develop stylesheets and designed CSSEdit to seamlessly slip into their workflow.

Outstanding Features

Intuitive Interface: CSSEdit's interface is intuitive and, therefore, easy to use. Though CSSEdit offers pull-down menus at the top of the screen like every-other Macintosh application, these are redundant. These functions are all available through the CSSEdit window. At the top left of the window are two buttons that switch between control view and code view. There is also a search box to help users find styles. Next to the search box are buttons to create new styles, create new group (displayed as a folder in the styles pane), create a new comment, delete selected style, preview styles, and export the stylesheet

Below this group of buttons is the control or code view (depending on which view is selected). When code view is selected, this pane displays the raw code for the stylesheet. A handy feature for coders at heart! But if the control view is selected, controls are displayed in this pane to define or edit the selected style. These controls resemble similar controls in GoLive and Dreamweaver, so controls include what one would expect by default: font, spacing & alignment, margins & padding, position and dimension, borders, background and lists. I personally use the control view most frequently, since I'm more a designer than a coder. It is also interesting to note that users can add/remove/rearrange buttons to better help them work.

Style Groups: One of the more useful features in CSSEdit are style groups, IMHO. Even for small web sites, stylesheets can become unwieldy quickly, especially if one is doing a lot of experimentation. These comment-based style groups help organize styles into logical categories. For example, I frequently group my styles into Footer, Header, Body, and if a page has variations of any of these, create a group for those styles, too. Very handy. Very easy to find a group of styles to be edited. Saves loads of time!

Favorite Font Families and Favorite Styles: Another time saver that eliminates repetitive selections. Favorites can be created and applied for font families, and even for entire styles!  It is relatively easy to create font group favorites. Font favorites are selected or created by clicking the heart icon beneath the font family field in the font control panel. Simple enough. It is not so intuitive to create a style favorite. Style favorites must be created in the Preferences. I did not find this information in CSSEdit's help feature, even with a search. It would seem that many users would want to create favorite styles, perhaps on a per-project basis. That this feature is hidden, even in the Help documentation, is unexpected.

Real-Time Previews: A wonderful triple-punch addition to an already top-notch application. Users can select to preview the selected style in the style drawer at the bottom of the CSSEdit window, in a web browser (list created dynamically from the user's system), or in any selected HTML page. The latter is particularly useful, but it is limited to previewing static HTML files. As long as the developer is working on static HTML, CSSEdit has him or her covered. If the developer's working on .asp or .php pages and needs to preview them, the revised stylesheet(s) will need to be uploaded just as they have always done to preview their revised styles. None of this is unexpected, but it is worth noting. I have no problem uploading the edited stylesheet and previewing in the server's natural environment to be assured of what I am getting with that PHP site.

Professional Reliability and Results

As you've already guessed, CSSEdit is a useful weapon in the web designer and web developer's arsenal. Not all weapons are created equal, but CSSEdit is one you'll be choosing every time you battle CSS stylesheets. CSSEdit doesn't care about the battlefield, whether static HTML, WYSIWYG web design application, or dynamic PHP e-commerce or content managed web site. All it needs is the stylesheet. Over the last few months I've used CSSEdit to edit stylesheets for my freelance Swope Design web site (built in RapidWeaver), several osCommerce PHP-based web sites (DeliveryDevil.com, ColaCollectables.com and WichitaTires.com), a PHP-based realty web site for The Real Estate Company, and a static HTML web site for Kansas Learning Center for Health. CSSEdit has been rock solid and indispensable. I won't go back to writing or editing CSS stylesheets in any other application. CSSEdit has its place in my dock in my web design arsenal.

It should have a place in yours, too.

Mike Swope - http://www.maccompanion.com/info/aboutus.html#mikeswope