If..Else Log

One of the characteristics of serious developers is the importance that they attach to their tools and working environment. When you're spending a significant amount of time each day developing, it's natural that you'll want that experience to be as comfortable as possible¹.

It's for this reason that it isn't surprising that we build up a large amount of brand loyalty to our favoured tools². The knowledge capital investment that goes into using these tools means that we're significantly more productive using them than without. To be more scientific, things just "feel right" when using our preferred tools³.

That said, being serious about our jobs, we're willing to explore and take a look at what else is out there and occasionally we uncover gems that allow us to put down our own polished treasures. One such gem is MacRabbit's CSS Edit, a new version of which was released earlier this month.

Enter CSS Edit

The idea of a "CSS editor" is a strange one; surely, a general text editor ala Textmate or Editplus would be enough. But to apply such blanket dismissals would be to say that a hammer is the only tool that you'll need. Far from being a limiting or marketing feature, by focusing on a specific application, CSSEdit turns into a must-have tool in a developer's toolkit.

Live previews

1. Edit
2. Save
3. Upload
4. Refresh
5. Rinse
6. Repeat

This particular workflow is all too familiar to web developers. Automatic FTP uploads (cf. Transmit) or working on local files can help mitigate the process by getting rid of task 3, but a fair amount of a developers day does seem to be taken up by mechanical processing.

Hence, CSSEdit's live preview is a wonderful boon. If you've used the live-editing feature of Chris Pederick's excellent web developer FF extension, you'll have some idea of the usefulness of the feature.

Make a small change to the colour of hyperlinks in your css file⁴; this is instantly reflected in the preview window. The preview window uses Webkit as it's underlying rendering engine so you're seeing how the page will look in Safari.

Even better is that you can use your css file as an override for any file/url. This is easy to overlook so I'll say it again. You can override or edit the css for any page without making changes to that given page's markup.

Want to edit your WP theme's css but don't want to make a local/temp copy? All you have to do is click the "Add URL" and "Style Sheets" buttons. You can even pull down a copy of the active CSS stylesheets for that url into your workspace and start working off that. You can see how your CSS looks across all your pages (home page, comments page, blog posts, etc) without writing out markup for each of those pages.

Note that this isn't WYSIWYG but WYSIWYW. You're still in control as you're editing your css file by hand but some of the unnecessary roadblocks are removed.

X-Ray

Even if you use semantic classnames, and logical markup, there are times where you want to check how a particular element is marked up. Instead of viewing the source, you can just click on the X-Ray button and then click on the element that you want to inspect.

Once again, this isn't groundbreakingly new (for example, the FF users with the Firebug extension will be used to this feature as will Xylescope users) but it's refreshing to see it built in. It's yet another testament to the benefit of a focused app.

Rules pane

By focusing purely on editing CSS, CSSEdit is able to add organisational enhancement aimed at making life easier. One simple but important example of one is the styles pane. This provides a convenient grouped index of your CSS rules.

Rather handily, the items representing each of these rules visually represent what the rules look like (e.g. colour, background, type) making it easy to look for and access a particular definition. In addition, you can use the search-box as a filter to make looking for that elusive class that much easier.

Milestones

Every developer will know the benefit of versioning. The ability to "rollback" to a given stable version is an important life-saver to anyone working with code. CSSEdit introduces milestones, which you can use to represent saved states.

It's rather like Photoshop's snapshot system by giving you piece of mind unobtrusively and without difficulty. Now you can proceed to experiment without fear of breaking or losing that working version⁵.

Closing off

Rather than go through all the features, I've just given a tour through some of the ones which I think are particularly handy. There's also your usual editor features such as code formatting and intellisense but what I like about the app is that it does one job, namely edit css, but does it extremely well. It's not perfect and there are some things that I miss (code folding is one) or have no need for (for example, the properties pane and css validation features are all but unused) but all in all, I love it.

The greatest praise that I have for it is that whilst I'd still use Textmate as my general purpose editor, CSS Edit is now my editor of choice when it comes to CSS. Now if only it would let me choose a dark background colour for the code pane…

On an aside

With the advent of "sponsored posts" that are cropping up all over the blogosphere, I will just point out that this post has no affiliation or connection with MacRabbit, CSSEdit or any other party. These are just the words of a happy customer; the fact that it seems so positive is because I like it. No hidden agenda here.

It's annoying and disappointing that I even have to consider writing such an anti-disclaimer; the most damaging aspect of these so-called paid reviews is that they add noise and doubt so as to harm legitimate reviews.

1. This, of course, isn't unique to developing but is common to any activity or job that you do frequently. Someone commuting daily or playing sports professionally has different demands from those who only do so sporadically or as part of their hobby. Comfort, reliability, familiarity are all concerns which you may be willing to sacrifice when you're only semi-serious but not when it's crucial to your working life. [back]
2. Which also helps to explain why "versus" threads/posts (cf. vi vs emacs, Mac vs PC, FF vs Safari etc…) are always cauldrons for fiery discussions. [back]
3. Flamebait notwithstanding, this is probably one of the significant factors behind the large fanbase that vi and emacs still command. [back]
4. By working of your css file and not a 'temporary css session' as found in the web developer extension, you remove the hackiness nature/temptation. [back]
5. This isn't an excuse however to not use a real source control system to manage your code. I personally recommend Subversion but anything that isn't the abomination that is MS Visual SourceSafe will do. [back]