Style Sorter

Sort your styles meaningfully

Installation

Option 1

• Click here
• Click Install

Option 2

• Open the extensions panel in VS Code
• Search for Style Sorter
• Click Install

Usage

• Press Cmd/Ctrl + Shift + P
• Type Style Sorter: Sort
• Press Enter

Configuration

• Press Cmd/Ctrl + ,

• Search for Style Sorter

• Choose desired order

  • Alphabetical: Sort alphabetically.

  • Concentric: Sort properties applying outside the box model, moving inward to intrinsic changes.

    1. Box
    2. Border
    3. Background
    4. Text
    5. Other

  • SMACSS: Sort from most important, flow affecting properties, to least important properties.

    1. Positioning
    2. Visibility
    3. Box model
    4. Dimensions
    5. Text

  • Frakto: Order from the outermost layout and positioning rules, moving inward through structure, style, and interaction — inspired by the browser’s render tree.

    1. Positioning
    2. Box Model
    3. Layout
    4. Typography
    5. Visual
    6. Transform
    7. Interaction
    8. Miscellaneous

Credits

• Extension is built on css-declaration-sorter.