Perspective: Earn Your CSS Expert Badge with CSSEdit
The road to becoming a CSS expert is long, winding and littered with the heaps of markup dumped in pursuit of the perfect styling rules. Finding the perfect balance between style flexibility and fine-tuned rules can be nerve-wracking. What if you could have a CSS rock star with you while you traveled that road?
WARNING: Few tools in my ‘toolbox’ are as personally revered as CSSEdit so I’ll admit that this post will be highly-opinionated and chock-full of pom-pom waving. I’m a total fanboy for CSSEdit and I’m not ashamed to say so.
Getting Started
I’ve been a CSSEdit believer since November 2006. Now, I can’t remember the exact version number of CSSEdit that got me hooked but I can tell you what I remember thinking about CSSEdit: “Wow, this thing rocks!” Since that time, I’ve used CSSEdit exclusively for all my CSS editing tasks and it’s made me a better CSS coder—much, much better.
Key Features
CSSEdit2 is jam-packed with all the features you’ll need to make stylish, fast-loading websites.
First off, the user interface is stunning—it’s no wonder CSSEdit won an Apple Design Award in 20071 for the ‘Best Mac OS X Developer Tool.’ I’ve got no clue how many other tools fall into that category but I’d guess ‘a bunch’ and the fact that CSSEdit edged all of them out for best design is a testament to its design.
CSSEdit’s workflow allows for lightning-fast editing of local or remote stylesheets:
Before CSSEdit, I’d have to…- Log into my web server
- Download a stylesheet
- Make the changes needed
- Save the file
- Upload the file
- Refresh my web browser window
- Go back to Step 3 and repeat the process until it’s right
- Navigate to the site you’re working on within your web browser
- Use the ‘Preview and Edit Stylesheets’ bookmarklet
- Update CSS in CSSEdit using the code editor and real-time preview
- Once it’s beautiful, upload it to your web server
CSSEdit can guide you to make the right decisions in your stylesheets. One tool that helps you is the X-ray tool. When you activate X-ray mode in the preview window, you’re able to click on the various elements of your design and get a lot of great information. Not only do you see a visual representation of the margin and padding that are affecting that particular item, you also get the drilled-down style ‘path’ for the rule that would need to be created or modified to style that item. If you’ve spent any time working with CSS, you’ll know that sometimes the hardest task is determining a page element’s ‘path,’ so this tool will certainly come in handy!
Now that we’ve found the element we’d like to style, we’ll use CSSEdit’s code editor and style builders. Using the wizard-like interface on the right, CSSEdit can literally write the code for you.
When you do need to fine-tune your styling code, you can use the code editor just like any other text editor. The built-in text editor supports ‘code sense,’ making it smarter than most other text editors and it’ll help you find the styling rules that you’ll need:
How It Stacks Up
Now that I’ve shown you a good bit of what CSSEdit is capable of doing, let’s look at how it stacks up against the competition.
The only tool I could find that comes close to what CSSEdit provides is Coda, by Panic. It’s a little bit different than CSSEdit in that it’s meant to be much more than just a CSS editor. It’s billed as the ‘one-window web development’ application and that’s one of the things that gets to me a little bit.
Before I go any further, I will say that I am the proud owner of a few Panic products. Both CandyBar and Unison are the kings at their respective tasks and we’ll look at them at a later date. I’m going to offer my opinion of Coda and it shouldn’t be construed as Panic-bashing. Just good, ol’ fashion criticism.
Let’s look at how Panic’s workflow for editing a CSS edit file goes. First off, when you open a CSS file – locally or remotely – you’ll end up in the ‘Text Editor’ window:
From here, you have much of the same power that CSSEdit provides. In fact, this is my favorite window inside of Coda because it offers the same ‘code sense’ technology that CSSEdit provides:
From here, you have two different paths you can take. First, if you’d like to see how the CSS you’re editing is going to style a bit of HTML, you’re going to bring up the ‘Preview’ window by pressing Apple-3 (Command-3):
If you’d like to go to the builder-like interface, called the ‘CSS Editor’ in Coda, you’ll press Apple-4 (Command-4):
Coda’s builder is powerful and will write code for you, just like CSSEdit. In fact, most of the ‘tasks’ that two tools perform are identical in power. Coda even sports a DOM hierarchy tool that’s similar to CSSEdit’s X-ray mode:
So, it’s not a question of power in Coda. It’s the workflow in Coda that gets to me. You have to remember specific key combinations to go from one task to the next. Whereas, in CSSEdit, I simply press Apple-` (Command-`) to alternate between the editor/builder and the preview windows. You mentally have to think, “What is the key combination for the Preview window?” When I’m trying to devote my brainpower to editing a CSS file, I’m having to waste time thinking about the interface of the tool I’m using.
The partitioning of the tools within Coda doesn’t make for a very fluid workflow, either, but when your application is billed as the ‘one-window web development’ tool, you don’t have many other choices than a tabbed-interface.
I’m sure I’m being nit-picky about Coda’s workflow but, for me, CSSEdit’s workflow is closer to the simple workflow I need. Coda’s a great product if you’re looking for an all-in-one solution to cover all your bases but, as far as CSS editing, CSSEdit is the tool to use.
Why I Use It
I’d be lying if I told you I use CSSEdit for any other reason than its pixel-perfect interface and logical workflow. It’s evident that the developers at MacRabbit ‘just get it.’
MacHive was built using a select group of tools and CSSEdit is at the very top of my list of tools I wouldn’t want to be without. In fact, it’s usually the first application that I install on a new system.
Final Thoughts
MacRabbit crafted the be-all, end-all CSS editing utility when they designed CSSEdit. Though it’s conceivable, I highly doubt another CSS tool will come along with the same power and attention to detail.
Yeah, it’s that good.
Footnotes
1 See http://en.wikipedia.org/wiki/Apple_Design_Awards
—CG
“Loved the homage to CSS Zen Garden...”
“Yeah, I'm surprised someone caught that. ;) Ryan was a little worried that this was too much of a fanboy post, so I added the disclaimer. I will try to make my future posts more in-depth and less one-sided. Having spent countless hours in CSSEdit getting the MacHive site up-to-par, it was only appropriate that it was the subject of my first post. Thanks for reading!”
“
I’m with you
- I’m a total CSSEdit fangirl. I also LOVE Coda, and usually end up using a combination of the two to do my own work (although sometimes I forego a workflow solution and just use TextMate and Transmit and CSSEdit -it really just depends). I was never into the idea of CSS editors before using CSSEdit (in August of 2007, when I got my MacBook), because I figured there was nothing that a good text editor couldn’t do. Fundamentally, I still think that is the case, but like you, I’ve become a better CSS coder and my workflow has increased 10-fold by using CSSEdit.By the by, according to Cabel’s speech at WWDC 2007, Panic actually wanted to use CSSEdit in Coda, they didn’t want to have to write their own editor. However, Mac Rabbit made the decision not to license it (even though Cabel said they still would have let him sell the product on its own) and so the Panic guys had to roll their own solution at the last minute. I understand why a small company might not want to bundle their key product with another program, but the selfish side of me wishes those two programs could have been integrated, because that would be my ultimate one-program workflow solution.
”