🤖 Automate sorting declarations in just 4 steps
Tags: css, vscode
Published: 2020-09-11 01:17:19

First off, it should work with [CSS, PostCSS, Less and SCSS](https://github.com/hudochenkov/postcss-sorting/blob/master/README.md) (but I just tested CSS) and it is also available on [Sublime Text](https://github.com/hudochenkov/sublime-postcss-sorting), [Atom](https://github.com/lysyi3m/atom-postcss-sorting) and [Emacs](https://github.com/P233/postcss-sorting.el) (but this post only covers [VsCode](https://github.com/mrmlnc/vscode-postcss-sorting)).

Let's start! I'm working on my projects at [freeCodeCamp Responsive Web Design's Certification](https://www.freecodecamp.org/learn/) 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](https://medium.com/@jerrylowm/alphabetize-your-css-properties-for-crying-out-loud-780eb1852153) where there was a [particular response](https://medium.com/@danielsamuels/its-really-not-701515978ab6) that caught my attention and made me think even further about it. I kept searching and found [a great post in this community](https://dev.to/thekashey/happy-potter-and-the-order-of-css-5ec) 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](http://smacss.com/) 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](https://github.com/mrmlnc/vscode-postcss-sorting) that do the job** and also [an awesome article explaining an implementation](https://mollykannn.github.io/2019/03/18/vscode-css-sorting%20copy/) with it.

## **What I did:**

### **Step 1:**
Installed [PostCSS Sorting extension](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-postcss-sorting) 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](https://supunkavinda.blog/vscode-editing-settings-json). 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](https://pastebin.com/1Bh68kZR) because:
- It corresponds to the [most recent smacss.json](https://github.com/Siilwyn/css-declaration-sorter/tree/master/orders) 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](https://prettier.io/) (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.