Designer's Toolbelt: CSSEdit
This is the first in a new category of posts. Occasionally, I’ll feature a tool that I use as part of my design process.
I freely admit that I’m a bit of a gadget freak, and that applies more to software than physical devices. Recently, I’ve been doing a lot of HTML work, and I discovered a new tool that I’ve fallen in love with.
CSSEdit by MacRabbit follows the motto, “Do one thing, and do it well.” Its purpose is editing cascading style sheets (CSS), a task that it handles better than any application I have seen. As any good text-based code editor, it colors syntax, provides line numbers, auto-completes and auto-formats as you type, and provides commands for common actions, such as adding comments. But it doesn’t stop there.
CSSEdit provides GUI panels for editing styles much like professional applications such as Dreamweaver. Panels such as “Fonts & Color”, “Background”, and “Dimensions” make it easy to build and change styles with fields, menus, color pickers, and the like. However, whereas Dreamweaver requires you to switch modes, editing a style in a modal dialog, CSSEdit allows you to move seamlessly between the code and the GUI panels.
CSSEdit makes it easy to manage and navigate long stylesheets. It provides a list of the names of all of the styles, allowing you to rearrange, rename, delete, and group styles into folders. Selecting a style in the list scrolls the page to that style and highlights it. The editor is tabbed, so it’s easy to switch between multiple stylesheets.
Of course, when working with CSS, one needs to check the results in a browser often. CSSEdit’s preview feature is where it really shines. It allows you to specify multiple files and URLs that it will display in its tabbed preview window. This preview can display any site, even complex web apps, applying the stylesheet currently being edited. On top of this, CSSEdit provides the “X-ray” feature, which lets you select individual elements to see what, if any, styles are applying to them. Of course, selecting a listed style also displays and selects it in the code view. X-ray also displays outlines of objects on the page and indicates margins and padding, much like Firebug, the Firefox plug-in (a topic for another day). Furthermore, by selecting an object in the preview, you can choose to create a new style, automatically generating the selector!
Other nifty features include a selector builder that generates selector syntax from menu selections, validation based on W3C standards, and “Milestones”, a mechanism for saving multiple versions of a stylesheet, making it easy to try out different approaches.
CSSEdit is a Mac OS X-only application, and is a member of the “Delicious Generation”. It was named the “Best Mac OS X Developer Tool” in the 2007 Apple Design Awards.
This tool is immediately indispensable, and at $29.95, you can’t afford not to have it.