DEV Community

Matt Kenefick
Matt Kenefick

Posted on

CSS Alphabetize plugin for VSCode

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

Top comments (4)

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

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
 
isuke01 profile image
Łukasz Isu

Command 'CSS/SASS: Alphabetize properties' resulted in an error (e.replace is not a function)

Collapse
 
akash_stha01 profile image
akash shrestha

great