CODEWITHSUNDEEP
css
kine
kine

Reputation: 161

Sorting CSS properties into an arbitrary order?

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!

Upvotes: 16

Views: 913

Answers (2)

Finbarr
Finbarr

Reputation: 32126

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

Upvotes: 1

Hristo
Hristo

Reputation: 46497

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

screen shot

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

screen shot 2

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

Upvotes: 2

Related Questions