CSS Alphabetize plugin for VSCode

#vscode #css #plugin #organization

Ever get tired of seeing CSS like this?

tagName {
    width: 500px;
    color: #f0a10c;
    margin-left: 1rem;
    text-align: left;
    display: flex;
    transform: translate(-50%);
    background-color: green;
}

It's impossible to tell what is where. It should look like this:

tagName {
    background-color: green;
    color: #f0a10c;
    display: flex;
    margin-left: 1rem;
    text-align: left;
    transform: translate(-50%);
    width: 500px;
}

😍 😎 😇 Now you can easily tell which properties exist in the block and where you should be making your changes.

This past Saturday, I whipped together a quick plugin for VSCode that will organize your CSS/SASS properties. You can install it here: https://marketplace.visualstudio.com/items?itemName=PolymerMallard.css-alphabetize

The dropdown command shift+cmd+p is named: "CSS/SASS: Alphabetize Properties"

The default keyboard shortcut is: shift+alt+a

Top comments (4)

Gerrit Weiermann • Jul 20 '21

Oh that's an very interesting approach!

"Small" suggestion: it could groupsproperties by logic, not by the lexicographic order, although this would mean much more work to work out all those categories and order :)

Matt Kenefick • Jul 20 '21

Thanks for the feedback.

If I'm understanding you correctly, the explicit purpose of this plugin is to ignore an individual's logic and very specifically depend only on standardized lexicographic order (alphabetization).

The problem with grouping by logic is agreeing on order of those subgroups and which properties belong with which group.

Does "color" belong with "font" styles? Which group should "background-color" be in? Do "text-transform" and "text-align" go with "font" because they're related to typography? What do we do with properties that have only one item in their "subgroup"?

The simplest and cleanest way of knowing which properties exist in a block is sorting it alphabetically. Looking for "position"? Search for "P".