Sorting CSS properties into an arbitrary order?

Question

I would like to programmatically sort all declarations/properties (not the declaration blocks themselves, but the individual declarations inside each block) in a style sheet into an arbitrary order.

I have been able to find several methods online for sorting declarations alphabetically, or reverse alphabetically, or even by string length, but this is unhelpful for me because those sorting methods are essentially meaningless. Instead, i would like to sort according to the way i personally think of CSS rules, which places structural declarations first, followed by text declarations, followed by background declarations, and so on.

As an example, in case that's not clear, suppose i have a style sheet that contains the following:

#someid {
    font-size: 200%;
    background-color: #000000;
    color: #ffffff;
    padding: 4px 8px;
}

I would like to be able to sort this into something like:

#someid {
    padding: 4px 8px;
    color: #ffffff;
    font-size: 200%;
    background-color: #000000;
}

Does anyone know of a tool that would allow me to create sort of a template that defines the exact order i want the properties to be in, and then apply it to achieve something like the above? Or would this be easy to do via, say, a TextMate bundle?

Hope this isn't a ridiculous question. :) Cheers!

Answer 1

You could maybe look into http://www.codebeautifier.com/. There are a bunch of options you could choose from...

... but that doesn't quite fit what you're looking for. There is also the option of defining your own template...

... however, I don't quite know how it works. I hope this is helpful.

Answer 2

You may find that you are able to do this through a project like sass.