1. Code
  2. HTML & CSS

5 Time Saving CSSEdit Tips

Scroll to top
Read Time: 3 mins

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 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!



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!CSS Validation!CSS Validation!


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!Re-indent - built in compression 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
page on to grab them!

Handy Bookmarklets!Handy Bookmarklets!Handy Bookmarklets!


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


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

  • Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.