https://github.com/peter-neumann-dev/css-order

🎨 Custom order for consistent sorting of CSS properties
https://github.com/peter-neumann-dev/css-order

code-quality consistency css sass scss

Last synced: 4 months ago
JSON representation

🎨 Custom order for consistent sorting of CSS properties

• Host: GitHub
• URL: https://github.com/peter-neumann-dev/css-order
• Owner: peter-neumann-dev
• License: gpl-3.0
• Created: 2023-06-02T20:21:57.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-02T16:09:02.000Z (about 1 year ago)
• Last Synced: 2025-01-31T14:15:33.644Z (5 months ago)
• Topics: code-quality, consistency, css, sass, scss
• Homepage:
• Size: 19.5 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        


# 🎨 CSS Properties-Order

**An order for consistent sorting of CSS properties**

[![Release](https://img.shields.io/github/v/release/peter-neumann-dev/css-order?color=0D9488&sort=semver&style=for-the-badge)](https://github.com/peter-neumann-dev/responsive-image-linter/releases)

[![License](https://img.shields.io/github/license/peter-neumann-dev/css-order?color=0D9488&style=for-the-badge)](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`](css-order.txt)

_Read more about [Code Style Arrangement](https://www.jetbrains.com/help/webstorm/settings-code-style-css.html) in the JetBrains documentation._

### VS Code

1. Install the [PostCSS Sorting](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-postcss-sorting) extension

2. Add the CSS properties from [`css-order.txt`](css-order.txt) to the extension settings

3. Override the Keybinding to perform the sorting on save

```json

[

  {

    "key": "cmd+s",

    "command": "runCommands",

    "when": "resourceExtname  =~ /^.(scss|sass|css)$/",

    "args": {

      "commands": [

        "postcssSorting.execute",

        "workbench.action.files.save"

      ]

    }

  }

]

```

_Thanks to [Sebastian Richter](https://github.com/baschte) for providing these instructions._

## 💎 Credits

Inspired by [Concentric CSS](https://rhodesmill.org/brandon/2011/concentric-css/) from Brandon Rhodes.