CSS Edit: Stylish Web Development

Tables in web design were an anchor I clung to for far too long. Cascading Style Sheets (CSS) were a mad mojo that I could not wrap my head around for the longest time. Until I finally just told myself “no” to tables. Using Dreamweaver to develop sites with CSS has always proved frustrating, as pages never looked right in the preview pane and were difficult to manage.

When I first started using CSSEdit from MacRabbit it was as though someone lifted the blinds and made CSS easy to understand. It offers an elegant, easy-to-use system for crafting a CSS file and takes away all the headache of doing it manually.

This review will run through my experience with CSSEdit, highlight the major features, and explain how it may really help your web design workflow.

The Two Windows

CSSEdit utilizes a two-window approach to editing your pages – a style editor window and a preview window. Although the preview window does primarily what you’d expect, a few added features make it slightly more than just a basic “preview”.

Preview Options

Preview Options

The primary window you’ll be working with is the style editor. This is where the power and ease of use come into play with CSSEdit. You can have your code, a list of styles, and style options available in three panes of the window, allowing you to make simple changes to the styles of your pages.

CSSEdit Interface

CSSEdit Interface

The X-Ray & Inspector View

The X-Ray option offers an intuitive approach for examining your design to determine which style is being applied to an element. This is particularly helpful in troubleshooting problems where something doesn’t look as you would expect it to. There is also an inspector window which works like a HUD to float above your content and detail the currently selected style.

Once you click on an element when the X-Ray view is enabled, a breadcrumb trail appears at the top of the page that breaks down where the selected element is nested in your html.

X-Ray Closeup

X-Ray Closeup

In addition, the inspector window offers a view of what styles are attributed to the selected element. The HUD floats above the preview page and not only offers a list of applied styles, but has one-click access to add a new style to the element.

Visual and Source Editing

I must confess that I have a printed sheet of CSS selectors to use as a quick reference guide. There are just so many to remember and, especially if it’s one that you don’t use regularly, I often find myself scouring the source code of another site to remember how a particular effect is achieved.

Visual Style

Visual Style

CSSEdit takes care of this problem by offering an intuitive and unique visual method for changing or adding styles to your stylesheet. On the right-hand side of the style editor you can quickly edit and add various options to each defined style. No more worrying about HEX values for colors, as you now have a drop-down menu of colors to chose from.

However, if you aren’t the type of person who requires a printed reference sheet, you can edit the code in the window using the source editor. Even coding “by hand” is more intuitive with CSSEdit as the app will give you lists of options as you type (while watching out for duplicate properties) and even add brackets and spacing for you.

No matter which system you use – visual or source editing – as your stylesheet grows you can easily group your styles and color-code them so it’s easy to find what you are looking for. Do you have a section of CSS specific to a JQuery framework effect? Group those properties and to make it easy to scan to find the area of your sheet that needs attention.

Style Groups

Style Groups

The Selector Builder

Selectors can be somewhat difficult to manage in a large stylesheet and can become cumbersome. CSSEdit has a powerful selector builder that allows you the opportunity to build your selectors in plain english.

As you add options and elements to the flow, the app builds your selector and then inserts it into the code for the stylesheet. It’s just that easy! This is something that many web developers can find confusing and this makes it just about as easy as it could be.

Selectors

Selectors

Debugging & Validation

Validation

Validation

Finding what’s wrong with a stylesheet can be one of the most frustrating parts of web design. All it takes is one small error (bracket, semi-colon, etc.) and everything can fall apart. We also want our code to be valid and we don’t want to read through a hundred lines trying to find what is wrong.

First, CSSEdit has validation support built right in. Click on the “Validate” button and it will either tell you your code is valid CSS (by accessing W3′s validation service) or tell you where you have a problem (not just that you have a problem but where it is and why it has been flagged).

Thanks to the “Milestone” feature, you can always turn back the clock if you make some alterations and find that ‘alteration’ meant ‘broken beyond recognition.’ Go to the Milestone Manager and save your state (along with a name and date) and CSSEdit will alow you the option of going back to that state.

This is a great way to test new ideas as well – save a milestone and then try something new and innovative. If it doesn’t work, within 2 clicks you’re back to using what worked.

Milestones

Milestones

Online & Offline Style Changes

CSSEdit also gives you an environment to test your online content with a local sylesheet. Let’s say you have decided to make some changes to the stylesheet of your webpage but instead of changing and uploading it, you can change the properties locally and have the preview window linked to your online content.

This gives you the ability to override the styles used online and instead use the local styles for testing and tweaking. Once you’ve made the changes you want to make, just upload the new CSS file and you’re ready to go.

Conclusion

CSSEdit combines excellent visual and source-code tools to create a simple interface for working with a CSS file. Unlike with many other applications, previewing works reliably. Various advanced features are welcome additions, as is the ability to apply a local style sheet to a remote page.

However, as good as CSSEdit is at editing a style sheet, it does not allow you to edit your HTML files within the application. If you need an all-in-one solution, it may be worth considering something such as Coda or Espresso.

If you’re simply looking for a powerful style sheet editor, CSSEdit is certainly the way to go. It’s priced at $40, and a fully-functional free trial is available.


  • http://www.duellweb.com duellsy

    This looks seriously useful…
    Love the inspector view!

  • http://www.ademaweb.nl jeroen

    I don’t understand why people would want a seperate tool voor css developement. I use coda for years now and I love it. It works perfect with every code, including CSS. It has the same inspector view (even Safari has an inspector view).

    • TmiY

      I second that!

      • dixHuit

        Third.

    • http://www.jaredbell.com Jared Bell

      I generally use Coda for the initial development, but the incredibly useful inspector view in CSSEdit is a huge timesaver when it comes to debugging and determining complex specificity. Also being able to extract and override the styles on any site, live or local, without damaging existing files is the perfect way to work out CSS issues, try out ideas or even inspect and learn from techniques used by others. CSSEdit has been in my toolkit for the better part of two years and still impresses me.

    • dave

      for css editing coda isn’t even close to cssedit, I’ll use coda for the reg code but always cssedit for the css.

  • http://www.davidhellmann.com david hellmann

    it is not a good workflow to use two apps for coding. i use coda for all and thats a good thing.

    • dave

      It is when when those tools better suite your needs for that particular need.

      I use coda for front end, cssedit for styling and cfbuilder/eclipse for backend coding.

      I can switch from coda to cssedit just as fast as I can select the file in coda but then do my work in cssedit faster and save and switch back to coda faster than just using coda alone.

      “all-in-one” editors are rarely the best tool for the areas they cover so using the right tool for the right need is the best work flow.

  • Aziz Light

    I like this app, bought it a long time ago but now it hasn’t been updated for way way too long (almost two years). Besides, I can’t use anything else than Textmate anymore so it’s not a big deal. It’s definitely a useful tool for those who are not very experienced with css though.

  • http://www.favetec.de tobiasre

    CSSEdit is the best app I ever used! Must buy program!

  • gemmes

    This app is way more powerful than Coda (for CSS). Also, the creators of Coda tried and failed to get the developer of CSSEdit to let them integrate CSSEdit into Coda.

  • Barry

    I haven’t spent much time with Coda, but I honestly wouldn’t be able to survive without this app. It saves me a considerable amount of development time and is well worth the purchase price (though admittedly I got it originally as part of a bundle, I’d happily pay full price).

  • http://www.twitter.com/secondfret Joshua Johnson

    Wow, since I own Espresso I figured I didn’t need CSS Edit. I was wrong, this looks amazing.

  • http://www.firelabstudio.com Aaron Bazinet

    I use and love Coda, but for working with CSS I always fire up CSSEdit. Its unique tools offer some advantages, and it just “feels” nice to use.

    It’s practically the same to switch between HTML and CSS tabs (like in Coda) as it is to switch between HTML and CSS apps (like between Coda and CSSEdit). I think it’s actually easier to switch apps with command+tab then to switch tabs with command+shift+(left-or-right) bracket.

  • Dan

    Coda can’t come close to CSS Edit when it comes to working with style sheets. TextMate + CSS Edit is still the killer development combo. Coda is a nice 2nd if you can’t afford to purchase the two top programs.

    • Lenny Terenzi

      Textmate is a nice 2nd to Coda. :)

    • eddie

      coda is good for CSS edit.

  • http://thisisrobv.com Rob V

    Textmate + CSS Edit + Transmit + Git > Coda

    Can’t imagine front end development without CSS Edit, one of the best purchases I’ve ever made.

  • Deskman

    CSSedit was already there before Coda was even in development. I can’t imagine why it’s not a good idea to use different applications for different files. For HTML/PHP I use TextMate (or MacRabbits’ Cappuchino) and for Stylesheets I use CSSEdit. And it saved me a lot of time to do so.

    • Deskman

      Espresso it is… Cappuccino is what I need to wake up…

  • http://jonnotie.nl Jonnotie

    I’ve tried coda and espresso for a ’1 app workflow’ but it doesn’t beat the cssedit, texmate and transmit combination. You have to find out for yourself whatever workflow works best for you.

  • marcos Cerutti

    Guys, sorry for the lack of knowledge, but, what css edit do that coda can’t?

    Thanks

    • http://jonnotie.nl Jonnotie

      Having a good UI. Totally awesome preview windows. With firebug like functionality.

    • http://www.joshnichols.com Josh N.

      It also lets you format your code *exactly* how you want to — even with the auto completion.

      I like my CSS selectors to have their declaration all on one line with no spaces. Coda won’t let me do that.

      I use CSSEdit for initial CSS development and only use Coda for quick edits.

  • http://cgdigg.com Chen

    Seems CSSEdit isn’t update for a long time.

  • http://www.kamikazemusic.com Dave Sparks

    Personally notepad++ then tweaking using firebug.

  • http://www.travislehman.com Travis Lehman

    CSSEdit’s preview window + Inspector is amazing for figuring out what undesired styles elements are picking up:

    In the Preview window with inspector and xray turned on:
    1. Click an element
    2. Get a list of styles that are applied to that element (in all style sheets)
    3. Click on any style to immediately shift the text window to those styles

    Extremely fast and easy to find styles, perhaps ones you’re not familiar with because you didn’t do the initial development.

  • http://www.rtest.ws Richard Testani

    CSSEdit is the best CSS editor available hands down. The tool in Coda is nothing near this. While I do type my own css statements, nothing compares to the live preview along with the X-Ray for seeing if your HTML is modeled correctly, also extremely helpful in targeting elements that are generated by Javascript which you may or may know exist.

    Coda while a great tool, its killer feature is the integration with Transmit. Otherwise it doesn’t excel at much than individual tools.

  • http://alfrescofurniture.info Rik

    CSSedit is a quality program with two windows open your inspector and live preview its the best i have worked with its so easy and fast, had a while on espresso and use coda with cssedit
    it was worth the money at the time but should be updated soon to keep up with the changes a comin.

  • LockWesMonster

    +1 for Textmate+CSSEdit+Transmit.

  • http://inspiredbywordpress.com Daniel Groves

    I really (really really really) wish I could afford it! Would be perfect when working on dual monitors.

  • http://www.webguruz.co.uk/ Peter Natt

    Your Message…Webguruz is an IT Solutions Company providing fully integrated multidisciplinary web services.Webguruz.co.uk provides complete internet solutions including web application development, web design and development, internet marketing, search engine optimization, graphic designing, content development, multimedia presentations, domain name booking and web hosting.

    • LockWesMonster

      No amount of CSS can hide the smell of sh!t like this.

  • Pingback: Bookmarks vom 15. Juni 2009 bis 3. September 2009 | blogmanufaktur

  • Egill

    Haha, I’ve never noticed that it says on CSS Edit’s icon:

    ie sucks

    It sure does

  • Jack

    Hi all: Sorry for my ignorance, but I would like to know if CSSEdit + Esspresso, or Coda, can be use to import an existing website from a URL – Make a few changes – and then republish back to the server, using SSH or SFTP?

  • http://greyalley.com desaturated

    nice app, tried it once but still prefer dreamweaver tho..

    • http://jonnotie.nl Jonnotie

      Yes, we can see that.

  • Pingback: Bookmarks vom 15. Juni bis 3. September 2009 | m3 medien + marketing

  • Pingback: Christmas Giveaway Day 5: CSSEdit | Design City

  • Pingback: Christmas Giveaway Day 5: CSSEdit – Mac.AppStorm

  • Pingback: The Christmas Giveaway Finale! – Mac.AppStorm

  • http://www.martinvaresio.com.ar Orfebre

    Webguruz.co.uk provides complete internet solutions including web application development

  • wRkA

    Why the all this people use a lame editor?

    i don’t know, but i use since 1 year ago this editor and it’s the best.

    Try use this
    http://www.stylizerapp.com (Stylizer)…

  • http://www.geekyard.com Geekyard

    Wow nice editor I was using Rocketedit and this is an nice alternative ;)

  • http://nealpeck512.siterun.eu/index.php?pg=160765 click here

    It is the best time to make some plans for the future and it is time to be happy. I have read this post and if I could I desire to suggest you few interesting things or tips. Maybe you can write next articles referring to this article. I wish to read even more things about it!

  • http://www.best-dehumidifierreviews.org/ge-ader50ln-best-basement-dehumidifier-reviews.html Going Here

    Very interesting points you have mentioned , regards for putting up. “There is nothing in a caterpillar that tells you it’s going to be a butterfly.” by Richard Buckminster Fuller.

theatre-aglow
theatre-aglow
theatre-aglow
theatre-aglow