views:

472

answers:

2

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.

+4  A: 

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

Geoff
A: 

It's not a plugin and it doesn't know about CSS but it's often helpful: a spreadsheet such as Excel or Google Spreadsheets.

I often cut code, paste it into Excel, munge it a bit, and paste it back into my editor. I find this technique especially useful for quick alphabetizing.

jwfearn
eh - too much work.
Herb Caudill
Really? I just tried with your example code above: select, copy, paste in excel, click the "A-Z" button, copy. Took me less then 2 sec.
jwfearn