CSS Edit: Stylish Web Development

Tables in web design were an anchor I clung to for far too long. Cascading Style Sheets (CSS) were a mad mojo that I could not wrap my head around for the longest time. Until I finally just told myself “no” to tables. Using Dreamweaver to develop sites with CSS has always proved frustrating, as pages never looked right in the preview pane and were difficult to manage.

When I first started using CSSEdit from MacRabbit it was as though someone lifted the blinds and made CSS easy to understand. It offers an elegant, easy-to-use system for crafting a CSS file and takes away all the headache of doing it manually.

This review will run through my experience with CSSEdit, highlight the major features, and explain how it may really help your web design workflow.

The Two Windows

CSSEdit utilizes a two-window approach to editing your pages – a style editor window and a preview window. Although the preview window does primarily what you’d expect, a few added features make it slightly more than just a basic “preview”.

Preview Options

Preview Options

The primary window you’ll be working with is the style editor. This is where the power and ease of use come into play with CSSEdit. You can have your code, a list of styles, and style options available in three panes of the window, allowing you to make simple changes to the styles of your pages.

CSSEdit Interface

CSSEdit Interface

The X-Ray & Inspector View

The X-Ray option offers an intuitive approach for examining your design to determine which style is being applied to an element. This is particularly helpful in troubleshooting problems where something doesn’t look as you would expect it to. There is also an inspector window which works like a HUD to float above your content and detail the currently selected style.

Once you click on an element when the X-Ray view is enabled, a breadcrumb trail appears at the top of the page that breaks down where the selected element is nested in your html.

X-Ray Closeup

X-Ray Closeup

In addition, the inspector window offers a view of what styles are attributed to the selected element. The HUD floats above the preview page and not only offers a list of applied styles, but has one-click access to add a new style to the element.

Visual and Source Editing

I must confess that I have a printed sheet of CSS selectors to use as a quick reference guide. There are just so many to remember and, especially if it’s one that you don’t use regularly, I often find myself scouring the source code of another site to remember how a particular effect is achieved.

Visual Style

Visual Style

CSSEdit takes care of this problem by offering an intuitive and unique visual method for changing or adding styles to your stylesheet. On the right-hand side of the style editor you can quickly edit and add various options to each defined style. No more worrying about HEX values for colors, as you now have a drop-down menu of colors to chose from.

However, if you aren’t the type of person who requires a printed reference sheet, you can edit the code in the window using the source editor. Even coding “by hand” is more intuitive with CSSEdit as the app will give you lists of options as you type (while watching out for duplicate properties) and even add brackets and spacing for you.

No matter which system you use – visual or source editing – as your stylesheet grows you can easily group your styles and color-code them so it’s easy to find what you are looking for. Do you have a section of CSS specific to a JQuery framework effect? Group those properties and to make it easy to scan to find the area of your sheet that needs attention.

Style Groups

Style Groups

The Selector Builder

Selectors can be somewhat difficult to manage in a large stylesheet and can become cumbersome. CSSEdit has a powerful selector builder that allows you the opportunity to build your selectors in plain english.

As you add options and elements to the flow, the app builds your selector and then inserts it into the code for the stylesheet. It’s just that easy! This is something that many web developers can find confusing and this makes it just about as easy as it could be.

Selectors

Selectors

Debugging & Validation

Validation

Validation

Finding what’s wrong with a stylesheet can be one of the most frustrating parts of web design. All it takes is one small error (bracket, semi-colon, etc.) and everything can fall apart. We also want our code to be valid and we don’t want to read through a hundred lines trying to find what is wrong.

First, CSSEdit has validation support built right in. Click on the “Validate” button and it will either tell you your code is valid CSS (by accessing W3’s validation service) or tell you where you have a problem (not just that you have a problem but where it is and why it has been flagged).

Thanks to the “Milestone” feature, you can always turn back the clock if you make some alterations and find that ‘alteration’ meant ‘broken beyond recognition.’ Go to the Milestone Manager and save your state (along with a name and date) and CSSEdit will alow you the option of going back to that state.

This is a great way to test new ideas as well – save a milestone and then try something new and innovative. If it doesn’t work, within 2 clicks you’re back to using what worked.

Milestones

Milestones

Online & Offline Style Changes

CSSEdit also gives you an environment to test your online content with a local sylesheet. Let’s say you have decided to make some changes to the stylesheet of your webpage but instead of changing and uploading it, you can change the properties locally and have the preview window linked to your online content.

This gives you the ability to override the styles used online and instead use the local styles for testing and tweaking. Once you’ve made the changes you want to make, just upload the new CSS file and you’re ready to go.

Conclusion

CSSEdit combines excellent visual and source-code tools to create a simple interface for working with a CSS file. Unlike with many other applications, previewing works reliably. Various advanced features are welcome additions, as is the ability to apply a local style sheet to a remote page.

However, as good as CSSEdit is at editing a style sheet, it does not allow you to edit your HTML files within the application. If you need an all-in-one solution, it may be worth considering something such as Coda or Espresso.

If you’re simply looking for a powerful style sheet editor, CSSEdit is certainly the way to go. It’s priced at $40, and a fully-functional free trial is available.