CSS Tidy Integrated with Visual Studio

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:

 open

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

 closed 

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:

 cssTidyOptions

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:

 Capture

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