DEV Community

loading...

CSS Alphabetize plugin for VSCode

Matt Kenefick
Senior Engineer -- Learn to code first. Use libraries second.
・1 min read

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

Preview

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

Discussion (3)

Collapse
codinghusi profile image
Gerrit Weiermann

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 :)

Collapse
mattkenefick profile image
Matt Kenefick Author

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".

Collapse
ryelbanfield profile image
Ryel Banfield

Tried it and i like it! Thanks man.