CSSEdit -- A feature-laden CSS editor

Sep 30, '04 12:04:00AM

Contributed by: robg

CSSEdit The macosxhints Rating:
9 of 10
[Score: 9 out of 10]

Now that I've got more time to work on the site, I've been hard at work on getting Mac OS X Hints migrated to the latest version of Geeklog (1.3.9). As part of that effort, I've also been working on a new theme for the site (yes, it will see the light of day in the near future!), and that means lots of fighting with CSS. I find working with CSS particularly difficult, as I haven't spent much time with it, so I know just enough to be dangerous.

But that's where CSSEdit comes in. This handy little app is perhaps the only real CSS editor for OS X; there are many other programs that will do CSS syntax highlighting, but CSSEdit takes the complexity of style sheets and (mostly) hides it behind a very intuitive user interface. That's not to say that you can use CSSEdit effectively with no CSS knowledge -- you'll still have to understand the basics on your own (see the above link for more info). But once you have a basic understanding, CSSEdit can help greatly reduce the difficulty involved in managing a complex stylesheet.

A three-pane window shows you your defined styles (left pane), an instant preview of how they'll appear (bottom pane), and (coolest of all) the right pane contains all the various options for each style. You can tweak the settings related to fonts, text, blocks, positions, borders, backgrounds, and lists -- via an intuitive GUI instead of by memorizing CSS structure. Want a double-line border on the top, right, and bottom of a style? Just turn those borders on visually and choose the line style from a pop-up. Want to change the background? Pick a color from a color wheel. CSSEdit makes it brain-dead-simple to play around with styles quickly and easily. The live preview bar shows you exactly what you'll get from your definitions, too, so you get instant feedback.

But as a rookie CSS guy, the most useful function is the File -> Extract CSS from URL feature. Find a site that's got some cool CSS on it, and then use this button to load the stylesheet into CSSEdit. From that point, you can examine the CSS in detail and try to figure out how the cool stuff is happening. Yes, you can do this manually by viewing the page's source, then finding the linked stylesheet, copying it, and pasting it into a text editor. But CSSEdit makes it a two-click process.

If you prefer to get your hands dirty with CSS, CSSEdit has a great source-view editing mode, too. Auto-completion 'learns' which CSS selectors you use most often, and puts them at the top of a contextual menu for fast access. Indenting and colorization make it really easy to understand the structure, and the "auto-shorthand" feature can teach you how to combine some CSS functions into much shorter versions.

At $24.95, CSSEdit isn't cheap ... but it's already saved me hours of work and helped me learn a bunch more, so I'll be registering it later this week (the demo mode is restricted to saving CSS files of 2500 characters or less).

Comments (17)


Mac OS X Hints
http://hints.macworld.com/article.php?story=20040930000452883