Skip to content

🎨 Custom order for consistent sorting of CSS properties

License

Notifications You must be signed in to change notification settings

peter-neumann-dev/css-order

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

11 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

🎨 CSS Properties-Order

An order for consistent sorting of CSS properties

Release License


πŸš€ 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.