CSSEdit 2

November 11, 2006

cssedit2I’ve been through quite a few different editors the past couple of years but for the best part of a year now I’ve been languishing in the luxury of Textmate for all of my coding needs.

It handles everything very well but the one thing that has always been lacking in every application I’ve used is CSS, not it’s support but the fact that by nature it’s very visual.

I need something more than just line after line of CSS, I need to see how it looks and I need to do it quickly and easily without repeatedly saving files and refreshing browsers.

Enter CSSEdit 2…

Now, I checked out the previous versions of this many months back and although I liked it, it just didn’t offer enough over Textmate to make it worth my money.

A few months and a new version later and I couldn’t buy it quickly enough! It’s now a very capable and most importantly, useful, application that any web-designer on a mac really should own.

The Basics

codesenseNo CSS editor is worth a dime if the basic editing isn’t up to scratch and CSSEdit 2 delivers with “Code Sense” which predicts properties and values as you type, allowing you to choose the property and simply “tab” to add it to your code.

To the left of the source editor is a pane containing small visual representations of the elements in your CSS. Handy for looking at colours and fonts at a glance, you can also filter it “spotlight style” using the search field at the top.

interfaceTo the right of the source editor we have a “visual editor”, that is, drop down menu’s allowing you to visually choose borders, bullets, font sizes etc. without typing a single line.

Normally I would be wary as features like this typically produce quite nasty code. In this case however MacRabbit have implemented it perfectly and novice or experienced designers alike can rest assured that the code produced is valid.

The Goodies

Beyond the basic editing CSSEdit 2 packs some great features all geared towards making things easier and more manageable.

Milestones allow you to store snapshots of your CSS so you can easily revert back to an earlier time should something go wrong.

xrayThe best feature however has to be instant previewing of any page combined with something called x-ray. This allows you to edit the CSS of any page on any web-site and instantly see the results locally before making them final on your live site. X-ray enables you to click on any element and see it’s properties and how it interacts with other elements around it.

All in all it’s a terrific application that any designer will find a tremendously useful tool in their arsenal. At a mere £19 it’s also a bargain! Go and check it out at

Macrabbit.com

Feedback?

If you’ve found errors or have some feedback please . Comments aren’t currently enabled due to spam but I’m sure they’ll return in the future.

More Reading

Previously: Mixed Pack 2 for 2560x1600

Coming Up: Aurora