Try Tuts+ Premium, Get Cash Back!
5 Time-Saving CSSEDIT TIPS

5 Time Saving CSSEdit Tips

on Sep 10th 2008 with 46 comments

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!

Milestones

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!

CSS Validation!

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.

Re-indent - built in compression 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!

Handy Bookmarklets!

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!

Frequently used snippets of code

+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

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm Harley! I like to call myself a jQueryfied WordPress designer! What a mouthful, huh? I'm based in Australia and have been working with (X)HTML/CSS, Flash, Illustrator and Photoshop for over 3 years, and have found a now year and a half old obsession with WordPress and jQuery. Be sure to get some more info on me on my site!  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
Newer Comments →
  • Mr.Mikey

    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!

  • http://craigsnedeker.blogspot.com/ Craigsnedeker

    Wow, great tutorial.

    I want a mac….

    :D

  • http://curtisallenblog.com curtis allen

    thanks for the CSS tips

  • http://www.ben-griffiths.com Ben Griffiths

    Great tips, thanks :D

  • http://gospelmidi.blogspot.com Patrick Lewis

    Other than Dreamweaver, are there any other viable Windows alternatives?

  • stefan

    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

  • http://www.detacheddesigns.com Jeffrey Way

    @Stefan – I’d second that. VS2008 is the only IDE that I use.

  • http://www.kevinquillen.com Kevin Quillen

    Notepad++ ftw

  • http://www.insicdesigns.info insic

    WOW! i must have my MAC so that i can use it.

  • http://www.freshclickmedia.com Shane

    @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.

  • http://paulgendek.com Paul Gendek

    Yeah, I’m definitely going to write a Coda article for you guys!

  • http://www.detacheddesigns.com Jeffrey Way

    @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/

  • http://www.detacheddesigns.com Jeffrey Way

    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. :)

  • http://www.peacockcarter.co.uk Richard, Peacock Carter

    @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

    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.

  • http://www.detacheddesigns.com Jeffrey Way

    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.

  • http://www.johndeszell.com John Deszell

    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.

  • http://www.iphonepixels.com Mike Brisk

    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

    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.

  • http://davidcarreira.net D. Carreira

    Notepad++ for XHTML, PHP, CSS & Javascript ;)

    David Carreira

  • http://www.subooa.com mattems

    good to get some insight into another editor.

    Ill stick to coda though.

    cheers.

  • http://www.creative-toolbox.com/ George Penston

    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

    BBEdit +++ and Text Wrangler is free and still powerful. (Mac)

  • Mr.Mikey

    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.

  • http://www.tomstardust.com Tom

    Thanks for your tips. I use CSSEdit and I didn’t knew some of this features.

  • Anthony Bruno

    @ Mr. Mikey

    Yes I usually use both during my development. Primarly working with CSSEdits Preview page.

  • http://aloestudios.com Andy Ford

    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/

  • http://www.motion-effect.no Johnny

    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… :/

  • http://www.christinawarren.com Christina Warren

    @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.

  • http://taylorsatula.co.cc Taylor Satula

    If only i had a mac

  • http://webdesignerthings.com/ Benjamin David

    Great tips !

  • Pingback: MyWeb2.0Pedia » Blog Archive » 5 Time Saving CSSEdit Tips

  • simplechris

    @Kevin Quillen:

    your comment made my day.

    Notepad++ ftw, indeed.

  • http://enhance.qd-creative.co.uk James

    No! … I refuse to switch to a mac!!

    Notepad++ = YUCK! … No good for large projects!

    I use Komodo Edit + Visual WebDev’08!

  • http://bfbotparadise.org/ Stefan

    Is there an alternative for Windows platform?

  • http://www.designreverb.com Todd Austin

    @ Christina Warren – They didn’t strike a deal because MacRabbit has their own editor coming in November called Espresso. http://macrabbit.com/espresso/

  • http://www.jonathansace.com John

    How about us using WINDOWS? is there’s a VIsta compatible version?

  • Pingback: Added by a Pal to FAQPAl

  • Pingback: Context Includes - NETTUTS

  • Karina

    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.

  • http://joomlapanel.com Joomlapanel

    Interesting on how to Compressed stylesheets. very useful

  • Samuel Yu

    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?

  • Pelchile

    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.

  • http://reciprocity.be/ Keith S.

    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.

  • http://www.snackzon.se/ Erik Groda

    I just want a Mac now. :)

  • Pingback: 100+ Massive CSS Toolbox | tripwire magazine

  • Pingback: 99 Graphic Design Resources- A place for desginers |

  • Pingback: 50+ Online CSS Tools for Web Developers and Designers | tripwire magazine

  • http://MexiChriS.com MexiChriS

    reading this just wants to make me order a copy!

  • Pingback: 155+ Mega CSS Roundup of Tools, Tutorials, Cheat Sheets etc. | tripwire magazine

Newer Comments →