MacRabbit CSSEdit 2

Dedicated CSS Editor takes one giant leap
By Kevin Schmitt

Publisher: MacRabbit (http://www.macrabbit.com/)Platform: Mac OS X (PPC or Intel)Price: $29.95 for full version; $14.95 for upgrades from Version 1Users: Web designers and developersRecommendation: See below

If you're a Web designer, the process of writing code can be highly personal and subjective. Some swear by integrated development environments like Dreamweaver, while others are more than happy to hand-code. Now, if you just so happen to have planted your flag in latter camp, and you just so happen to develop on a Mac, then you really should take a good, long look at MacRabbit's CSSEdit 2.

I've been a fan of CSSEdit for a few years now, even naming it one of the "Ten Programs I Can't Live Without" way back in March of 2004. It was indeed a valuable tool for visually constructing the sometimes newbie-unfriendly CSS syntax. However, version 1 proved to be terribly buggy over time, and was prone to showstopping errors such as "forgetting" large chunks of painstakingly written CSS. I eventually found that CSSEdit was a stepping stone, showing me how to write CSS so that once the bugs became unbearable, I was ready to write my own from memory using my HTML editor of choice, BBEdit. In that respect, I owe a great deal to the original version of CSSEdit, though it ultimately proved to be a beginner's tool, and one that was left behind once I found my sea legs.

So what gives? What is it about version 2 that makes CSSEdit once again an invaluable tool in my Web design arsenal? While I'll soon beg you to let me count the ways, suffice it to say at this point in the review that while CSSEdit 2 packs many new features and improvements under the hood, its real value is that version 2 is supremely useful for beginners and experts alike. Plus, the nasty bugs present in version 1 are, thus far, a distant memory.

The quick tour

One of the things that drew me to CSSEdit in the first place was its interface, which was wonderfully Mac-like and split between visual editing mode and source editing mode. As a beginner, the visual editors were a boon, and once I got more comfortable, the source editor became my mode of choice. CSSEdit 2 retains much of the feel of the original interface, but with several improvements (fig. 1).

Figure 1: The CSSEdit interface.

As we'll see later, CSSEdit even adopts the floating/semi-transparent palettes that Apple's Pro apps have been using. Anyway, onto the tour: the left part of the interface contains the styles list, which offers very rudimentary previews of fonts and colors as appropriate and is largely unchanged from version 1. Clicking on a style in this list will select it and allow you to add properties to the style either visually or by typing directly in the source editor. You can also add groups and drag and drop styles into groups (which manifest as folders in the list) for quick and easy organization. The groups show up in the CSS file as standard CSS comments, so nothing proprietary is added to your file.

In the center is the aforementioned source editor, which contains a few nice features. You can set the desired font you want to use to view the source, change the colors used for the syntax highlighting, and turn line numbering on and off?all stuff you'd expect in a source editor. Going above and beyond, at least in this context, are two very helpful features: code sensing and custom formatting. Code sensing is as it sounds; it pays attention to what you're typing and assists you by filling in code based on what it's "seeing" (fig. 2). This, of course, can be turned off or tweaked if you're not into what it's doing, but I've found it to be very helpful in speeding my CSS sessions.

Figure 2: Code sensing fills in the blanks (or, in this case, blacks) for you.

Now, if you've ever hand-coded anything before, you know all too well that the way you format your code may not be the way other folks (or even WYSIWYG editing programs) format code. CSSEdit's custom formatting (or default spacing, as it's called) allows you to "show" the program how you like to format your code, which CSSEdit then takes and runs with (fig. 3). Not only will the visual editors write code in your preferred format, but you can reformat any CSS that you didn't write to your specifications simply by using the Re-indent command.

Figure 3

Let's conclude our tour around the CSSEdit environment by spotlighting the most notable change in version 2, CSSEdit's signature visual editors, which are located on the right side of the interface. The visual editors have been completely revamped, transformed from a tabbed row of tiny icons to vertical sliding panels with more descriptive text labels (fig. 4). Clicking on a category will automatically collapse the current category, and then open the selected one, which is a cool trick for neat freaks like myself. You can, however, set a preference to override this behavior if you want to have more than one category open at once.

Figure 4

Of course, the interface shown back in Figure 1 is set to display both the visual and source editors at the same time, but you can also choose to hide one or the other if the mood grabs you. So that's the basic CSSEdit interface. So far, so good.