Subscribe to
NSLog(); Header Image

CSSEdit 2.0: A Little Sizzle, A Lot of Steak

CSSEdit 2.0 IconCSSEdit 2.0 was released yesterday and, though I was technically a beta tester, I didn't spend much time with the application, instead opting to edit my CSS files manually in BBEdit. I reasoned that I was too busy doing actual work to learn a new application.

That was a mistake.

Having spent a few hours with CSSEdit 2.0, I've come to regret the time I could have saved using MacRabbit's wonderful app for what would have amounted to only a few minutes of actual learning. Though I don't have the time to fully review the app, I'd like to point out a few highlights.

CSSEdit 2.0 X-Ray

CSS editing has always been a brutal cycle of "edit, upload, reload, repeat as necessary." I couldn't preview files locally because some URLs didn't work or my web pages were split over a series of files. CSSEdit solves this problem by offering a preview window that displays remote web pages. It also allows you to override the remote stylesheets with local copies, facilitating rapid development of CSS without any of the headaches caused by more traditional methods.

The X-Ray feature, seen in the strip above, allows you to click on any element in a web page - bold text, an image, or an ordered list, for example - and have the complete DOM and CSS path to that image displayed. Above, the screenshot shows where my sidebar random image exists within the hierarchy of my CSS files.

"Milestones" is a lightweight version-control system for data, though I'm not entirely sure how the data survives across editing in multiple applications. Even if your milestones were completely lost, the "saved states" functionality this offers within a single work session is worth noting.

CSSEdit Code Formatting

One of my favorite features, oddly enough, is the code formatting (or "Default Spacing") offered within CSSEdit 2.0's prefs. I like to write code like you see above, and with CSSEdit 2.0, defining my own general coding style is as easy as making two blocks of code look like I want. The style is then applied to stylesheets I open. Gone are the days of clicking checkboxes labeled "Begin each block on new line" or toggling radio buttons beneath "Indent attributes with:". The manner in which this is handled is perhaps one of the most elegant things I've ever seen in software.

CSSEdit 2.0 is fast, it's elegant, and packed with features to make my life easier. I'm sorry I waited so long to use it!

P.S. The title is in reference to this entry.

8 Responses to "CSSEdit 2.0: A Little Sizzle, A Lot of Steak"

  1. This reminds me - I really need to learn CSS...

  2. Looks interesting - I'll have to give it a try. I pretty much exclusively do my CSS editing with TextMate... it does look kind of nice.

    My only real problem is the apparent lack of being able to change the background colour of the editor - I like my code editors to have a nice dark background colour with light coloured code on top.

  3. Erik,

    Milestones save a full copy of your file in ~/Library/EditMilestones (along with notes), so other apps won't be aware of them. They aren't able to mess them up either, however.

  4. Holy smokes! CSS is a passion of mine but at the same time, it's a real pain in the rectum for the same reasons mentioned in this post. I have looked at a few CSS apps in my time and thought I'd give this one a try and was quite frankly blown away by how well thoughout it is and how much of a difference it makes. My suggestion for anyone considering it, go to css zen garden and start playing.

    This app is awesome.

  5. [...] “CSSEdit 2.0 is fast, it’s elegant, and packed with features to make my life easier. I’m sorry I waited so long to use it!” - Erik Barzeski [...]

  6. I totally agree with this post! In fact even the p.s. makes me laugh because I came here from the original post and when I read your axiom in that post I thought of CSSEdit because it is one hell of a sizzly steak. I've always thought that even the 1.3 version was a really well *crafted* application and had some of the most elegant features in it that I had ever seen, but 2.0 blew the doors off of that. I upgraded my license before even trying the app, because on the website I could see the beautiful thoughtfulness that was put into the app.

    I was not disappointed. In fact, even found more surprises, like the superbly elegant code styling that you mentioned.

    Anyway, my $.02

  7. Looks awesome. CSSEdit has become one of my favorite tools, and now got even better. Thanks!
    The “Applied Styles” feature is a god-send. Now I don’t have to use Firefox anymore just for that

  8. I use CSSEdit a lot. The Preview you talked about is a life saver.