Mac CSS Editors: Make HTML Sing For Less

Cascading style sheets, combined with at least transitional XHTML makes for superb layout and design of web sites. However, CSS is a somewhat arcane set of rules for defining element placement within XHTML (and HTML) pages. That’s where a good editor comes in.

Google VersionTracker for “CSS editors” to see what you get (yes, Google is now a verb meaning, ‘search online’).

There’s not much, is there? Try the same search on MacUpdate. Slim pickings. Frankly, that’s surprising. More surprising is the fact that only one of the top Mac CSS editors shows up in the search results.

Of course, you can create and edit CSS on any basic text editor, from TextEdit to BBEdit to anything else that generates “clean” text.

The problem with basic editors is that you have to remember all the CSS rules while you edit. For most of us, whether we’re creating web sites daily or not, it’s tough to remember all the basics, let alone most of the tricks.

That’s where a good CSS editor can save hours of page layout time.

I use three editors for CSS; each approaches CSS requirements a bit differently, though. First, StyleMaster by WestCiv has been around a number of years (I’ve used it since the Classic days), is regularly updated, and in traditional Mac excellence, has a WYSIWYG editing capability yet allows direct code editing, too.

A relative newcome is CSS Edit from MacRabbit. The interface is substantially different than StyleMaster yet manages to provide WYSIWYG and direct text editing from a simple, non-palette interface.

Of course, I’m a fan of BBEdit and frequently use it to modify CSS. However, BBEdit’s claim to fame is as a text editor, first for programming and scripting, then HTML (some may argue that point), then CSS. So I used BBEdit to touch up and modify, rather than create CSS text.

Recently, my time developing CSS has been split between John Allsop’s (WestCiv.com) excellent StyleMaster CSS and CSS layout editor, and Jan Van Boghout’s very good CSS Edit. Both have their strong points, both are quite different.

WestCiv may be the best location on the web for basic CSS information and the StyleMaster CSS editor is one of the best tools you could ask for to help you wade through the arcane rules and twists and turns of CSS. It’s excellent palette-based editor is Mac-like (there’s also a Windows version) and intuitive. Even if you don’t know much about CSS you can get the hang of it quickly using StyleMaster.

StyleMaster has a few Wizards to get you started; both for creating a CSS file, using CSS for page layout, and for creating select CSS elements such as a navbar menu. StyleMaster also shines when it comes to ease-of-use and getting tricky with CSS. Yes, those are often opposed to each other; StyleMaster does it better. Creating that first stylesheet is a simple process.

Creating more complex layouts and menu structures is made decently easy via the Wizards. The complex becomes easier.

The biggest fault I have with StyleMaster is the requirement to have all the tools in the pop-out window pane (so popular with many Mac OS X applications these days). That requires too much clicking to go back and forth between text and borders and backgrounds and margins and padding. I’d like an option that allows quick access to all the tools at once AND shows status.

StyleMaster also shows you what your CSS will look like without having to upload to a site and check with a browser. That’s handy and saves time big time.

At the other end of the scale, yet very useful, is CSS Edit. You won’t find the many palettes or window panes here. I like this editor.  WYSIWYG is prominent via a large “real time” window at the bottom of the editor. Make a change to the CSS and it shows up instantly. That’s very useful. However, you really need to know something about CSS to get started. No Wizards.

I find the icons that represent the various CSS tools to be a bit small; that requires me to think about what they are. Having a mixture of icon and text is still worthwhile for some of us who remain iconically challenged.

StyleMaster is the CSS tool I turn to most. It does more. It costs more. It hasn’t failed me yet.

For quick edits, I like CSS Edit because of the instant “real time” display of the CSS result.

Are these the only CSS editors for the Mac. Of course not. At the high end of the scale is Macromedia’s Dreamweaver. While not a full-fledged CSS editor (it’s HTML, XHTML, full site management capable), the integrated CSS is quite good, albeit non-intuitive.

I’ve also used Morphon CSS-Editor with mixed results. I tend not to use something that crashes two out of the first three times of use. It deserves both the stars from VersionTracker readers.

PageSpinner 4.6 deserves a mention, simply because it’s a very credible, affordable HTML, XHTML editor that also handles CSS admirably. No wizards, so you still need to know what CSS is, and enough to get it started. If you love treading your way through menus, you’ll like PageSpinner.

For those of you new to CSS but want to dive in, I recommend StyleMaster. It’s an excellent editor for the newbie, but has a steady learning curve and can get you to more complex levels than any other editor for the Mac. Click Here for the WestCiv site, which is also an excellent spot for learning materials for CSS.

If money is an object, you’ll get far with CSS Edit. It’s intuitive, stable, and the WYSIWYG approach is beneficial for everyone who needs CSS on their web site (if you don’t have it, you need it and just don’t know it yet). Click Here to view the particulars from the MacRabbit site.