css-order

🚀 What it does

Can be used within IDEs or code editors to sort CSS properties in a consistent order on code reformat command.

⚙️ Setup

JetBrains IDEs

1. Open the code style settings for CSS, SCSS or SASS (according to your needs)
   • File | Settings | Editor | Code Style | Style Sheets | SCSS for Windows and Linux
   • Your IDE | Settings | Editor | Code Style | Style Sheets | SCSS for macOS
2. Open the tab "Arrangement"
3. Select "Custom order"
4. Add the CSS properties from css-order.txt

Read more about Code Style Arrangement in the JetBrains documentation.

VS Code

1. Install the PostCSS Sorting extension
2. Add the CSS properties from css-order.txt to the extension settings
3. Override the Keybinding to perform the sorting on save

[
  {
    "key": "cmd+s",
    "command": "runCommands",
    "when": "resourceExtname  =~ /^.(scss|sass|css)$/",
    "args": {
      "commands": [
        "postcssSorting.execute",
        "workbench.action.files.save"
      ]
    }
  }
]

Thanks to Sebastian Richter for providing these instructions.

💎 Credits

Inspired by Concentric CSS from Brandon Rhodes.