Question

Eric Meyer’s advice to keep individual rules alphabetized in a CSS style definition makes sense – there’s no "natural" way to order rules, and this makes it easy in a complex definition to make sure you don’t define the same thing twice.

div.Foo {     background:Green;     border:1px solid Khaki;     display:none;     left:225px;     max-height:300px;     overflow-x:hidden;     overflow-y:auto;     position:absolute;     top:0;     width:230px;     z-index:99; } 

So my question: Is there a plugin or some other easy way to select a list of rules in Visual Studio and alphabetize them? (Better yet, to apply this throughout a stylesheet in one fell swoop.)

Update

@Geoff suggests CleanCSS, which is very cool and will do the above-requested alphabetization all at once, in addition to a lot of other nice clean-up (e.g. merging definitions with the same selector). Unfortunately it collapses multiple selectors in a definition into a single line. For example

div.Foo, div.Foo p, div.Foo li {    color:Green; } 

becomes

div.Foo,div.Foo p,div.Foo li {    color:Green; } 

which is much harder to read and kind of a deal-breaker. This is with the lowest compression setting, and I don’t see a way to override it.

Answer 1

I don’t know of anything in visual studio, but there online tools to clean up and format css. I’ve used CleanCSS with success

Update:

Try this one Format CSS Online. It seems to output the lines more like you want