CSSEdit 2 review
- Go to comments
- Add a comment
- Posted by Phu
- Tags:
- CSS Edit
- review
- CSSEdit
- MacRabbit
- OSX
- web developer
- mac
- text editor
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 possible1.
It's for this reason that it isn't surprising that we build up a large amount of brand loyalty to our favoured tools2. 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 tools3.
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
- Edit
- Save
- Upload
- Refresh
- Rinse
- 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 file4; 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 version5.
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.
- 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]
- 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]
- Flamebait notwithstanding, this is probably one of the significant factors behind the large fanbase that vi and emacs still command. [back]
- 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]
- 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]
-30-
You summed up my fondness towards CSSedit perfectly Phu. I took the leap of faith with V1, and knew that it was then only a glimpse of what it could be, and has now become.
The idea of a pure CSS Editor is still a bit of a stretch for a lot of people, who will understandably prefer to code html, css, ruby, php, etc. within a single application. But if there are applications as good as CSSedit that perform those singular tasks so well, the only consideration then is how much more time consuming it is to work in separate apps Vs one central code editor. On the odd occasion when I am forced to use something other than CSSedit, it hurts. I’ve grown dependent on the colour-coding, visual listing of my classes and since V2, the awesome live preview you mentioned and the joy-to-behold interface.
I get the feeling that if CSSedit was to ever be available cross platform, its developer could live off the proceeds for a long time, but in the meantime I take great pleasure in showing it off to my windows toting friends who invariably recoil with jealousy.
True; there are good and valid reasons to use a single app vs different “best of breed” (and vice versa) but I have a strong suspicion that letting someone play around with CSSEdit for a few minutes will be enough to win them over:)
Indeed. I’d love for this to be ported to Windows.
That’s one of the main reasons for owning a mac, no? ;)
Hey, CSSedit looks great…! I’ve been shaping CSS on Dreamweaver and it feels so limited.
BUT… Too bad CSSedit only supports OSX 10.4 or higher…!!!! Grrrhhhg..
I’m stuck on 13.9, do you have any recomendations of what to use instead?
I’m trying to style a Wikka Wikki page for my next project. Any info would be great! Thanks a lot.
BTW, everything in the site looks great ;)
Matias
My adventure with CSSEdit 2 was an unbelievable one — I cannot believe I actually made websites using long sessions of coding. I made some changes I wanted to do for quite some time to my website… in under 2 minutes! It would’ve taken me (an average coder) at the very least 8 minutes to do the same manually.
I just did my first custom CSS theme last week and I wished I’d had this tool available for Windows when I did it.
Editing a live site would be so cool.
I do think CSS Edit 2 is great, but the one think I would like to add to it is the ability to select an element in the preview window and then edit that element’s attributes as one, even if they’re spread around the CSS file. Sort of contextual item editing.
Hey thanks for the explanation on CSS Edit 2!
Btw, I can’t wait to see your site fully rebooted…
Nice blog design. Where can i download it?!
I can’t believe I’ve never heard of this! :O
I just downloaded it and I’m very impressed. The way it organizes the CSS is just amazing and the app looks beautiful to boot. Decided to buy it after just an hour or so of tinkering around with. It definitely beats using TextEdit and the EditCSS Firefox extension which I’ve been doing for the last few years, so thanks for the heads up!
By the way, I haven’t visited your site in a while and I gotta say your theme right now is pretty sexy. Nice work. And have you see the new Simplebits slogan? “Hand-crafted pixels & text.” Maybe a little bit inspired from somewhere else. ;)
I was just curious (because I like your layout so much), have you always used a mac to develop on the web? Or have you tried other platforms, say windows or linux? If you have only used mac why? If you have used more than one environment, how does the mac stack up against the others.
It seems to me (I used to own a mac before designing for the web) that macs do have a lot of little, useful web tools, like the one above, tools with elegant styles and interfaces themselves that aid in the development of websites and decrease the amount of time certain tasks take. Am I right?
I want a mac, I don’t want/need a laptop, and Apple desktops are just too damn expensive…
I’ve not long bought CSS Edit and fallen in love with it’s ease of use and speed. The advantage of being developed in native code for the Mac. I have used WestCIV’s StyleMaster and that is not bad, but runs sluggishly on my Mac. It comes in a PC version too and is not too bad on that platform. though for now I am CSS Edit convert… round trip Dreamweaver -> CSS Edit -> Browser (I do double checks in different browsers).
Thanks for your review! Very informative. Maybe I will test it. Go on!
Currently I’am using TopStyle 3.1 (Bradsoft) and I’m very happy with it. But CSS Edit seems to be a good alternative for Mac-Users…
Is there any version that run on windows OS?
Please suggest me if any.
[…] After hearing much buzz about it, I decided to take CSSEdit for a test run. I don’t know — maybe I’m just stupid or something — but I couldn’t for the life of me figure out how to do anything. The only thing I could actually figure out how to do was to edit the source by hand, which I can do easily enough in TextMate. […]
I like CSSEdit, but my beef with it is that it is geared toward CSS editing for documents which are assumed to already have *the right* semantic layout to begin with. In reality, when I work on something, I tend to sometimes go back and forth between having to modify semantics/xhtml and CSS. For instance, what if you decide you want to move the search box into a dedicated search div outside the sidebar? This sort of semantic re-arrangement cannot be done within CSSEdit, right?
Great application but too bad I am on Windows XP. I’ve been using Dreamweaver CS3 for CSS and it sucks. I wonder if we have a similar software for windows?
zeb wrote:
“Great application but too bad I am on Windows XP. I’ve been using Dreamweaver CS3 for CSS and it sucks. I wonder if we have a similar software for windows?”
If you are searching an application for css/html you should try Microsoft Expression Web. Brand name “Microsoft” don’t encourage but this program seems to be a good alternative.
Eventually something smaller -> www.blumentals.net/webuilder/
And obviously Firebug in Firefox for analysis…
sorry for my english.
Thank You for another very interesting article. It’s really good written and I fully agree with You on main issue, btw. I must say that I really enjoyed reading all of Your posts. It’s interesting to read ideas, and observations from someone else’s point of view… it makes you think more. So please try to keep up the great work all the time. Greetings
This software is amazing. I will be purchasing a copy for my web design class. A huge time saver.
thanks for the explanation on CSS Edit 2!it’s really good for your sharing..
I get the feeling that if CSSedit was to ever be available cross platform, its developer could live off the proceeds for a long time, but in the meantime I take great pleasure in showing it off to my windows toting friends who invariably recoil with jealousy.
So thanks, i am searching about 2 weeks for how can i edit css.
Nice blog.