stylelint-logical-order

Stylelint config that sorts related property declarations by grouping together following the order:

1. Special
2. Position
3. Box Model
4. Border
5. Box
6. Spacing
7. Typography
8. Content Layout
9. Visual
10. Background
11. Transform
12. Animation
13. Svg
14. Misc.

.element {
    /* Position */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
 
    /* Box Model */
    display: block;
    float: right;
    width: 100px;
    height: 100px;
 
    /* Spacing */
    margin: 10px;
    padding: 10px;
 
    /* Border */
    border: 2px solid red;
    border-bottom-width: 1px;
    border-left: none;
 
    /* Typography */
    color: #888;
    font: normal 16px Helvetica, sans-serif;
    line-height: 1.3;
    text-align: center;
 
    /* Content Layout */
    columns-count: 3;
 
    /* Background */
    background-color: #eee;
 
    /* Transform */
    transform-origin: 0 0;
    transform: translateX(-50%);
 
    /* Visibilty */
    opacity: 1;
 
    /* Animation */
    transition: all 1s;
 
    /* Svg */
    fill: red;
    stroke: 2;
 
    /* Misc */
    user-select: none;
}

Usage

1. Add stylelint and this package to your project:

npm install --save-dev stylelint stylelint-logical-order
# or, if you prefer yarn over npm: 
yarn add --dev stylelint stylelint-logical-order

1. Add this package to the end of your extends array inside Stylelint configuration (.stylelintrc for example):

{
  "extends": [
    "stylelint-logical-order"
  ]
}

Extended version with more settings

"stylelint": {
        "rules": {
            "at-rule-no-unknown": [
                true,
                {
                    "ignoreAtRules": [
                        "if",
                        "for",
                        "import",
                        "else",
                        "each",
                        "mixin",
                        "include",
                        "content",
                        "extend",
                        "at-root"
                    ]
                }
            ],
            "order/order": [
                "custom-properties",
                "dollar-variables",
                "declarations",
                "rules"
            ],
            "indentation": "tab"
        },
        "extends": [
            "stylelint-logical-order"
        ]
    }

Credits