CSS Tools: ‘Style Master’

Sholom Sandalow, Tuesday, July 11, 2006 @ 5:11 pm

I visited Apple's development tools section earlier today, and came across "Style Master", a css editing tool. I decided to take the plunge and see what it can do. Here’s a quick review.

Currently, I use Adobe Go Live CS2 currently to edit my style sheets, simply because it’s a lot easier to use the same tool for your entire web workflow. So I will compare some of the features in Style Master to it. Keep in mind, Go Live does a lot more than style sheets, but with it's latest version, CS2, adding a number of style sheet related features, editing and manipulating CSS is a major part of the Go Live interface.

Helpful for Beginners
Style Master looks to be designed especially for those at or near the start of their CSS adventures. The Read Me file answered some fairly beginner questions, and the WYSIWYG toolbar makes it easy to edit your style sheets without having to touch any code.

There's even a Style Sheet wizard, which steps you through the process of creating a CSS document with the settings you want based on a series of simple questions.

Debugging and Validation
The validation and compliance tools are quite nice. I especially like the bar at the bottom of the window that tells you weather your code is valid CSS1 and CSS 2, and weather it will render properly on every major browser since IE4. There's also a 'Debug' menu option that contains a number of useful sub options, such as 'Validate in Browser' which sends the file to the W3C for validation checking in your selected browser, and 'Report Unused Statements' which will check weather the style you have selected is not connected to any elements in your HTML documents.

Interface
The interface is quite easy to use. I picked up the general idea in about 15 seconds without the tutorial or set up guide. The major features are duplicated on the tool bar as icons, although there are some useful tools that are hidden all the way at the bottom of the window, including the Add and Edit selector actions.

Features
The dynamic search feature makes it easy to find the selector you are looking for in large files. One advantage it has in this regard over Go Live, is that you don't searches aren’t case sensitive, so you can find selectors even if you don't remember what you've capitalized.

The properties editor is a bit more powerful then the equivalent in Go Live, which groups related properties, and sometimes makes it cumbersome to find the one you want. In Style Master you have the option to view all properties that can be applied to a selector in an alphabetical list.

Performance
The only trouble I got was when I tried to create a style sheet using the Wizard. After I hit submit, it took about two minutes for the application to create the file and open it, during which time I had no control over the interface. I would never use the Wizard in any case, so this wouldn't affect my workflow. However if you like the idea of a style sheet wizard, beware--this might be a little frustrating.

Overall, Style Master is a nice little Style Sheet builder/editor with a number of advantages over Go Live CS2. It has a number of features for those who are unwilling or unable to hand code CSS. It also provides the CSS pro a simpler and easier way to find and edit styles.

Related posts:

1. Style Guide tips and Tricks: Finding patterns
2. ZK – Documentation & Tools
3. A Short List for Contextual Inquiry
4. Web Accessibility is Good Business
5. Better JavaScript Development with Google Closure Tools

Comments (1)

User Experience Design

Comments: 1 so far

• Leave a comment
• Comment feed for this post
• TrackBack URL

1. 

   This tool is immensely powerful for people who are skinning the CSS of something like a forum or blog engine. You can get many of the tools in Firefox with a bunch of plugins, but the integration and stability is worth the price of Style Master.

   Comment by Andrew White, Wednesday, August 2, 2006 @ 8:17 am

Leave a comment