Shortlist of Visual CSS Editors
I thought it could be useful to create a shortlist of visual CSS editors ranging from the down right expensive aka Adobe, through to the very good value commonly referred to as free! They all have their merits and are worth exploring in greater detail.
I applogise if these tools are heavily focused on the Mac platform, I have tried to include PC visual CSS editors for balance but the Mac is my tool of choice for web development, my PC only ever gets turned on to sort out my “Bill Gates headaches”.
Coda
Coda has got to be one of my favorite Mac apps, another excellent offering from Panic, the guys behind what is, in my humble opinion the best FTP client of all time Transmit.
Coda is much more than just a CSS editor but seeing as this post is supposed to relate to CSS editors I’ll focus on the CSS element to Coda.
Coda provides the discerning web designer with the choice of either working in a visual way or traditional code view. It is simple to flip backwards and forwards between editors. I find it productive to set up the overall CSS structure in the visual editor and use the code view to make fine tunning adjustments.
The visual editor itself provides all the features you would expect, grouped in to logical sections to make things simple to use. You can also use the split pane view to run the visual editor side by side with the code editor which is fantastic for brushing up on your CSS syntax.
Coda uses the inbuilt Safari rendering engine for previewing your masterpieces. Another great feature is the ability to use global “clips” a great utility which allows you to save reusable snippets of code, a great productivity booster.
I would highly recommend Coda, I guarantee once you get used to the way it works you’ll love it, and not just for CSS, for HTML, PHP and whatever else takes your fancy.
This post has turned in to a expression of love for Coda, I now have a choice to rename the post title Coda the best CSS editor ever, or carry on with my shortlist . . . in the interests of being impartial I will carry on.
Adobe Dreamweaver
I was always very fond of Adobe GoLive when I started out in web design. Although it did teach me bad habits of using a WYSIWYG HTML layout editor with nasty tables and proprietary Adobe code. When I moved away from the dark side I still used Adobe GoLive as a visual CSS editor as it was what I was used to and had some nice features.
Since the release of Adobe Creative Suite 3 GoLive has been relegated to this history books in favor of the popular Dreamweaver. I can’t say I blame Adobe for this choice, Dreamweaver has such a huge following with the professional market, however I must say I am a little sad to see the old faithful GoLive disappear. Anyway on with the review.
Adobe Creative Suite isn’t exactly the cheapest of products, leaving Photoshop and Illustrator out of the equation lets see if Dreamweaver’s CSS capabilities are worth the extra money.
Dreamweaver CS3 brings a whole host of new CSS related features including a sophisticated visual CSS editor. It has the ability to move css selectors between different files which is a nice touch and if you are anything like me your designs generally follow the same format.
To aid your productivity Dreamwearver CS3 comes with stock CSS layouts, although I always find it better to build your own layouts from scratch (or reusing old base stylesheets) but that is my own personal preference. Dreamweaver also has an inbuilt browser compatability checker but unfortunately I don’t think it is quite time to chuck out your PC’s.
CSSEdit
MacRabbit’s CSSEdit is a very popular Mac based CSS editor (as the name suggests) and it is very reasonably priced to boot. Well is it any good? I hear you ask, well I certainly think so!
CSSEdit provides the ability to edit any open CSS file and preview the results in real time. It also has a nifty Xray feature which allows you to quickly and easily locate the selector name, which is great if, like mine, your memory isn’t as good as it used to be (Although it is getting better thanks to Lumosity).
CSSVista (Finaly a PC app)
CSSVista is a PC CSS editor brought to you by the guys behind the online browser testing service SiteVista. The bonus is it is completely free, but it is more than just link bait to promote Site Vista it is a useful tool in it’s own right.
The number one killer application for CSSVista is the ability to edit CSS and preview the results in both Firefox and Internet Explorer instantly. If I used a PC to develop my clients websites I would definitely use this even if it is only for final bug fixing work.
Style Master
Style Master is a editor specifically focused on standards based XHTML layout and CSS style creation. It is available on both Mac and Windows platforms and boasts a great feature list.
Style Master not only provides a comprehensive tool for building CSS layouts and designs, WestCIV have also incorporated tutorials to aid in learning CSS. Plenty of useful insight for beginners and experts a like.
I hope you have found this web design shortlist useful, it is the start of many more to come. If I have missed any gems, or if you have anything to say about the above mentioned editors please leave a comment.
2 Responses to “Shortlist of Visual CSS Editors”
Leave a Reply
July 23rd, 2007 at 7:05 am
Coda is an awesome application, I would recommend it to anyone. Of course you need a Mac but you need a Mac anyway.
July 26th, 2007 at 5:12 pm
Coda does look great, almost worth buying a Mac for?
Its interesting to know dreamweaver seems to be catching up. The last time I tried it the css functionality just wasn’t up to scratch… could be worth another try.