🤖 Automate sorting declarations in just 4 steps

Jose Mendoza — Fri, 11 Sep 2020 01:17:19 +0000

First off, it should work with CSS, PostCSS, Less and SCSS (but I just tested CSS) and it is also available on Sublime Text, Atom and Emacs (but this post only covers VsCode).

Let's start! I'm working on my projects at freeCodeCamp Responsive Web Design's Certification and started to ask in my head: is writing random stuff on my CSS files the only way to do it? I mean, shouldn't it be ordered in some way? Aren't there ways to order CSS properties out there?.

After some googling found an article covering the topic where there was a particular response that caught my attention and made me think even further about it. I kept searching and found a great post in this community and yeah, after all, there wasn't one but many (random, alphabetically, in groups and probably more I'm not even aware of yet).

So I found myself wanting to give a try to SMACSS and thinking: what about automating the process? Sorting each file manually probably isn't the best idea (I couldn't even imagine following this approach in a large codebase), there must be an efficient way to handle this! Again, after some more googling found a great VSCode extension called PostCSS Sorting that do the job and also an awesome article explaining an implementation with it.

What I did:

Step 1:

Installed PostCSS Sorting extension on VsCode by:

Pressing Ctrl + P
Pasting this: ext install mrmlnc.vscode-postcss-sorting
Pressing Enter key

Step 2:

Edited settings.json (there is a good guide with many methods. I used the first, so:

went to File -> Preferences -> Settings (you could just press Ctrl+Comma as well) -> Extensions -> PostCSS Sorting Configuration -> "Edit in settings.json"

Step 3:

Replaced the default "postcssSorting.config": {} with this code because:

It corresponds to the most recent smacss.json version at the time of writing
(don't worry if you prefer to use others!)

Step 4:

Saved changes and tested:

Went to a CSS file
Pressed F1
Searched for "PostCSS Sorting: Run"
Pressed Enter key

Step 5 (extra):

Enjoy 🎉

I'm combining it with Prettier (for formatting) but I'm curious about your preferred way to do all that stuff! Feel free to share which it is and why in the comments. Thanks for reading.