5 Time Saving CSSEdit Tips
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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Harley
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Rockstar WordPress Designer
Now updated for WordPress 3.0, this classic book on WordPress theming and design has sold over 3500 copies! Get yours now!
Top Selling
on Codecanyon
jQuery Lightbox Evolution only $12.00 
Events Calendar Pro - Wordpr ... only $30.00 
Honda Malta - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+ mobiletuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
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!
Wow, great tutorial.
I want a mac….
thanks for the CSS tips
Great tips, thanks
Other than Dreamweaver, are there any other viable Windows alternatives?
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
@Stefan – I’d second that. VS2008 is the only IDE that I use.
Notepad++ ftw
WOW! i must have my MAC so that i can use it.
@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.
Yeah, I’m definitely going to write a Coda article for you guys!
@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/
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.
@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.
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.
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.
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.
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.
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.
Notepad++ for XHTML, PHP, CSS & Javascript
David Carreira
good to get some insight into another editor.
Ill stick to coda though.
cheers.
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.
BBEdit +++ and Text Wrangler is free and still powerful. (Mac)
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.
Thanks for your tips. I use CSSEdit and I didn’t knew some of this features.
@ Mr. Mikey
Yes I usually use both during my development. Primarly working with CSSEdits Preview page.
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/
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… :/
@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.
If only i had a mac
Great tips !
@Kevin Quillen:
your comment made my day.
Notepad++ ftw, indeed.
No! … I refuse to switch to a mac!!
Notepad++ = YUCK! … No good for large projects!
I use Komodo Edit + Visual WebDev’08!
Is there an alternative for Windows platform?
@ Christina Warren – They didn’t strike a deal because MacRabbit has their own editor coming in November called Espresso. http://macrabbit.com/espresso/
How about us using WINDOWS? is there’s a VIsta compatible version?
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.
Interesting on how to Compressed stylesheets. very useful
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?
When I am developing on a Mac I use TextMate and CssEdit. I used to use Dreamweaver exclusively but I found that it was making me lazy. When I am the windows box I use PhpDesigner which is really good, after setting it up for your environment.
I really like CSSEdit, but the only thing that keeps me from using it full-time is the fact that you can’t change the background color for the editor. I find dark text on a light background gets hard on the eyes after hours of looking at it…and don’t give me the “color temperature” speech. I’ve tried adjusting it, but it doesn’t make a difference.
I just want a Mac now.
reading this just wants to make me order a copy!