CSS documents can often times be quite scrambled when dozens of developers are adding their styles in. Some people like their styles built with one class/id per line (closed) and some like it with one property/attribute per line (open). Either way, if you receive the document in the particular format you don’t want it or perhaps full of inconsistent formatting it is a real pain to format it / read.

So first thing you can do is use an online compressor and quickly copy and paste it back and forth, like this one (works with JS an CSS):

http://refresh-sf.com/yui/

Open Version:

Closed Version (my preference – easier to read and find a single style):

Recently another developer introduced me to CSS Tidy: http://csstidy.sourceforge.net/

And you can use an online version of CSS Tidy here to try it out: http://cdburnerxp.se/cssparse/css_optimiser.php

I saw you could download it and use it from command line (as an .exe). That got me thinking that this could easily be added as a Third Party tool into Visual Studio Tools menu like this:

I had to add an option for both opening and closing. Simply go to, Tools -> External Tools. In the dialog that comes up, configure to work with CSS Tidy has follows:

Title: Whatever you want to name it…

Command: the location of the CSSTidy.exe (which you can download from http://csstidy.sourceforge.net/download.php ).

Arguments (choose one):

1. To open tags:             $(ItemPath) –preserve_css=true –template=Standard  $(ItemPath)
2. To close tags:             $(ItemPath) –preserve_css=true –template=high  $(ItemPath)

And that is at. No simply open the file in Visual Studio to change, then run one of these commands from the Tools menu and will get a notification that file has changed (click Yes to reload). Note – if using with TFS you will need to have the file checked out before CSSTidy will have access to it.

There is, of course, a ton more switches and templates to use….check ‘em out for yourself to tailor the commands to your style: http://csstidy.sourceforge.net/usage.php