Surely with all of us dev, everyone has had the thought “code is working”. That thought sounds quite negative, because when going inside there will be many other problems arise.
For example, there are 3 devs with the following code samples
Friend A
1 2 | <span class="token selector">a</span> <span class="token punctuation">{</span> <span class="token property">color</span> <span class="token punctuation">:</span> #000 <span class="token punctuation">;</span> <span class="token property">display</span> <span class="token punctuation">:</span> inline-block <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
You b
1 2 3 4 5 | <span class="token selector">a</span> <span class="token punctuation">{</span> <span class="token property">color</span> <span class="token punctuation">:</span> #000 <span class="token punctuation">;</span> <span class="token property">display</span> <span class="token punctuation">:</span> inline-block <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Friend C
1 2 3 4 5 | <span class="token selector">a</span> <span class="token punctuation">{</span> <span class="token property">display</span> <span class="token punctuation">:</span> inline-block <span class="token punctuation">;</span> <span class="token property">color</span> <span class="token punctuation">:</span> #000 <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Naturally when displayed on the browser they will not make any difference, but look further. When that project assigns others to do maintenance or upgrade, what will they think of. Your code meets the requirements but certainly doesn’t meet the quality, which we call each other “clean code”.
Stylelint or scss-lint was created to create a common set of rules for SCSS / CSS / LESS writing and presentation.
PostCSS Sorting is one of those “Clean Code CSS” standards, focusing primarily on alphabetical order of attributes. 
In this article I will guide you in detail how to install and configure the PostCSS Sorting utility / package on 2 IDE (VS Code & Sublime Text) so you can easily arrange your scss / css / less files with just a few basic operations
1. Sublime Text
Step 1: Install Package Control (go to step 2 if you have already installed)
Go to https://packagecontrol.io/installation copy code and paste it into the console window that appears. Wait for the installation process to complete please restart the IDE
Step 2: Install Post CSS Sorting
Select the Install Package section and look for the PostCSS Sorting keyword to install
Step 3: Configure the utility
At the right side of the user settings, enter the following json string and save to complete
1 2 3 4 | <span class="token punctuation">{</span> <span class="token property">"properties-order"</span> <span class="token operator">:</span> <span class="token string">"alphabetical"</span> <span class="token punctuation">}</span> |
Step 4: Use
You can follow these steps to run the utility
Or faster can use the keyboard shortcut Ctrl + Alt + Shift + S
2. VS Code
Step 1: Install the extension utility extension
Step 2: Configuration
If your config file has nothing, create the following config
1 2 3 4 5 6 | <span class="token punctuation">{</span> <span class="token property">"postcssSorting.config"</span> <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"properties-order"</span> <span class="token operator">:</span> <span class="token string">"alphabetical"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
If you already have a few configs then add commas and serials to the file 
Finally, save the settings
Step 3: Use
Conclude
Done! Very quickly, you can order all the properties for your css files with just a few simple steps (to be honest, I used to do it manually, but I was so frustrated, so I decided to grop for any tools. do it and that’s why there’s this article: v)
Please familiarize yourself with the coding standards (e.g. indent, semicolon, end of new line, stylelint, scss-lint, …) make sure to look back at the old code written not following those standards. Feel very uncomfortable when reviewing code
If you find a good article, give me +1 upvote. If you like me, click the follow button for more cool stuff. Good luck !