What is PostCSS Sorting? Front End programmers need to know about it

Tram Ho

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

You b

Friend C

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

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

If you already have a few configs then add commas and serials to the file Finally, save the settings

Step 3: Use


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 !

Share the news now

Source : Viblo