CSSEdit is another fantastic web dev app, which takes Apple's WebKit by the reigns to deliver a fantastic real-time visual CSS editing experience. But that's just it! People only know it as a visual CSS editor, when it is actually much more! I use these 5 fantastic tips to keep my work flow fast and smooth.
Milestones
Milestones are a nifty little feature that basically save the need for trillions of apple+z's to get back to where you were. Milestones basically save the document for you at the point you define, to which you can then go nuts with CSS after and not have to worry about messing up too many styles! You can then revert back to these when necessary, and save many more on top of that. Think of it as a preempted version of Time Machine, only it isn't automatic!
Validation
Like Coda, CSS has a in-built code validation tool, to save you from the hassle of visiting the W3C validation page! Simply click the little icon, and a pretty looking list of errors (or none if you're a genius!) are displayed. You can then click on each error and the editor will take you to the line!
Re-indent
Compressed stylesheets can sometimes be a real pain to trawl through. Looking for a specific style with specific attributes can be a complete nightmare. Thankfully, CSSEdit has a handy dandy feature that spreads out all your CSS so that it's readable again! Simply click format>re-indent, and you can even customize the spacing used! The code behind the window (in the picture below) will shortly be turned into what's in the preview-pane! This could also be used as a compression tool, by getting rid of all the spacing and indents with the 'Re-indent With Spacing...' tool.
Browser Integration
Say you're cruising your favorite blog, and saw a visual feature that you just need to know how it was done. With the neat Bookmarklets, you can select a bookmark provided by MacRabbit, and that page will be transferred directly into CSSEdit - ready to override stylesheets and x-ray the page! Simply visit the Bookmarklets page on MacRabbit.com to grab them!
Favourites
I don't know about you, but I tend to re-use styles over and over. If you go window>favourites, you have a sweet pane that you can drag your styles from the editor sidebar into to keep them for future use - kinda like Coda's Clips! You can also add, modify and edit the present font-families used in your styles too!
+Workflow
I hope these 5 little tips have helped you out in managing a quicker and more efficient workflow. Naturally it's packed with other features, such as tabbed working, heirarchical grouping (for managing loads of styles into folders), Live previewing and more. Be sure to get a Demo of the software if you don't already own it Here.
- Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Related Posts
Check out some more great tutorials and articles that you might like
User Comments
( ADD YOURS )Mr.Mikey September 10th
Nice Tips! Downloaded this a while back, but ended up drifting back to dreamweaver. Not sure why :S
Think these tips tempt me to have another gander at it!
Craigsnedeker September 10th
Wow, great tutorial.
I want a mac….
curtis allen September 10th
thanks for the CSS tips
Ben Griffiths September 10th
Great tips, thanks
Patrick Lewis September 10th
Other than Dreamweaver, are there any other viable Windows alternatives?
stefan September 10th
A windows alternative would be visual studio 2005(8) I’m a traditional macintosh developer but at work I use .net, it’s probably the best IDE i’ve used, it dusts eclipse dreamweaver etc
Jeffrey Way September 10th
@Stefan - I’d second that. VS2008 is the only IDE that I use.
Kevin Quillen September 10th
Notepad++ ftw
insic September 10th
WOW! i must have my MAC so that i can use it.
Shane September 10th
@stefan and @Jeffrey - I too use Visual Studio 2008 a lot of the time.
As good as it is as an IDE, it doesn’t feel as nice as something like Coda. I understand they’re different types of applications… just commenting about general usability.
Paul Gendek September 10th
Yeah, I’m definitely going to write a Coda article for you guys!
Jeffrey Way September 10th
@Paul - That would be great. Just remember that we’ve already posted an article on Coda that is very similar to this. http://nettuts.com/misc/5-time-saving-coda-features/
Jeffrey Way September 10th
Shane - Without a doubt, Coda is amazing. But, I do the majority of my developing on the PC. If Coda “crossed the borders”, I might have to reconsider my platform.
Richard, Peacock Carter September 10th
@Patrick Crimson Editor is OK for Windows (if a little basic), but if you’re more of a developer, something like Eclipse (for PHP) might do.
stefan September 10th
There a couple of good editors on the mac textmate being the 1st and foremost as well as coda but they will only be for mac which renders them pretty much useless at work which is a Microsoft shop.
Even if by some stroke of magic and we all got mac’s I think I’d still use visual studio it’s an awesome product.
Jeffrey Way September 10th
Speaking of which - I was watching Youtube yesterday, and found these guys who were able to run Leopard and Vista on a Dell. Anyone have more information on this? How sweet would that be. Though, I’m sure it’s illegal.
John Deszell September 10th
Here is an article about building a Hackintosh:
Build a Hackintosh Mac for Under $800
I want to do it, though I’m sure it breaks some TOS for OSX.
Mike Brisk September 10th
CSSEdit is an amazing CSS editor. It’s a cheap alternative and a very high quality app. Any Mac user; this is a must get, it will change the way you style your sites.
Rodrigo September 10th
I used to use CSSEdit my only problem is the lack of customization that’s why I prefer Textmate specially with this bundle http://minimaldesign.net/downloads/tools/textmate-css-bundle it really makes things easier. I hope CSSEdit will add customization on their next version.
D. Carreira September 10th
Notepad++ for XHTML, PHP, CSS & Javascript
David Carreira
mattems September 10th
good to get some insight into another editor.
Ill stick to coda though.
cheers.
George Penston September 10th
Good article. I’ve been using and loving CSSEdit since 1.0. I’ve tried switching to Coda a couple of times. I even bought it but TextMate abundance of just enough killer, time-saving features keeps bringing me back. And even Coda 1.5.1 is still crashy. One thing that caught my eye when reading your article is that you say Coda will validate your CSS. Is this really true because I didn’t think it was possible. I thought it just had inline validation on HTML files. Another reason I like TextMate. It has validation for both CSS and HTML.
Lumaflux September 10th
BBEdit +++ and Text Wrangler is free and still powerful. (Mac)
Mr.Mikey September 11th
Does anyone here use Coda AND CssEdit? or do they just use the CSS editor within Coda?
There are features in Edit that I love (easy groups, comments, milestones etc) but I like being able to use one app for my xhtml & css development.
Tom September 11th
Thanks for your tips. I use CSSEdit and I didn’t knew some of this features.
Anthony Bruno September 11th
@ Mr. Mikey
Yes I usually use both during my development. Primarly working with CSSEdits Preview page.
Andy Ford September 11th
Here’s another tip for CSSEdit that you might find handy. You can customize the attributes and properties available in the auto-completion drop down by editing a .plist file - http://aloestudios.com/2008/08/getting-more-out-of-cssedit-part-2/
Johnny September 12th
Sheeeit!, why is everything so much neat, sexy and tempting with Mac (I know why). I want a sweet apple too!
Nice tips, but I cant enjoy them… :/
Christina Warren September 12th
@MrMikey - I use both. I prefer CSSEdit over Coda’s editor, because there are situations that Coda won’t show a certain class that CSSEdit will, and I just prefer CSSEdit, but I use both.
Actually, according to Cabel’s presentation at C4 last year, Panic tried to strike a deal wth MacRabbit to include CSSEdit with Coda. They would have still let it be sold as a separate program, but they wanted to use it as their CSS Editor (like Subethaedit is their text editor). Unfortunately, they couldn’t work it out and Coda developed their own. Which is a shame.
Still, I use and love both.
Taylor Satula September 13th
If only i had a mac
Benjamin David September 13th
Great tips !
simplechris September 16th
@Kevin Quillen:
your comment made my day.
Notepad++ ftw, indeed.
James September 18th
No! … I refuse to switch to a mac!!
Notepad++ = YUCK! … No good for large projects!
I use Komodo Edit + Visual WebDev’08!
Stefan September 18th
Is there an alternative for Windows platform?
Todd Austin September 18th
@ Christina Warren - They didn’t strike a deal because MacRabbit has their own editor coming in November called Espresso. http://macrabbit.com/espresso/
John September 24th
How about us using WINDOWS? is there’s a VIsta compatible version?
Karina November 3rd
For those asking for a windows app, I cannot recommend enough Stylizer:
http://www.skybound.ca/stylizer/
It has good visual editing tools, really good for both newbies and power coders.
Joomlapanel November 12th
Interesting on how to Compressed stylesheets. very useful
Samuel Yu November 12th
Thanks for the tips! Just getting started myself in the Mac software world. Is it worth getting into Coda, especially with Espresso coming out soon?
Add Your Comment
( GET A GRAVATAR )Your Name November 21st
Trackbacks