Is there a tool to alphabetize CSS definitions in Visual Studio? - css

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

Ben's answer is correct but is error prone but lead me to this plugin:
https://github.com/mrmlnc/vscode-postcss-sorting
Simply add this to your settings.json after installing,
"postcssSorting.config": {
"properties-order": "alphabetical"
}
Then in the vscode command panel (cmd+shift+p) choose PostCSS Sorting: Run
There's lot of other great config options too including how to handle comments.

Answer 2

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

Answer 3

In fact it's much more simple and you do not have to install any plugin.
Just go File > Preferences > Keyboard Shortcuts
Then Type Sort lines ascending, then map a keybinding to that.

Answer 4

Use CodeMaid. Ctrl+M+F9 will sort any text in your selection, regardless of type.

Answer 5

In 2021, I found this extension that does the job perfectly ; It also can sort any blocks codes in others languages: https://marketplace.visualstudio.com/items?itemName=1nVitr0.blocksort
Important note: You must first group the selectors on a single line, otherwise the plugin will not understand that they go together. For example:
// Don't do this
.rule1,
.rule2 {
color: red;
}
// Do that
.rule1, .rule2 {
color: red;
}

Answer 6

In VSCode. Just attach a key binding to the
“Sort Lines Alphabetically” command.
File > Preferences > Keyboard Shortcuts
Type “sort lines” in the search box and add a keybinding to Sort Lines Alphabetically. For example Ctrl+Cmd+O.
However you need to be careful with your formatting as this feature is not smart enough to move css properties that are wrapped to multiple lines.

Answer 7

There's a VSCode plugin called CSS Alphabetize that should allow you to do this.
Disclaimer: I'm the author. Not trying to plug it, just happened to come across this article.
https://marketplace.visualstudio.com/items?itemName=PolymerMallard.css-alphabetize

Answer 8

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.