⌘ K
css · sort · alphabetic · live

Sort CSS properties alphabetically

For every rule block, sorts its declarations by property name. Selectors, comments outside blocks, and rule order are untouched. Runs locally.

Sort CSS Properties
Input
87 B
6 lines
Output
87 B
6 lines
Status
ready
live
Ratio
1.00×
out/in
input · css
output · sorted css
.card {
  background: white;
  border: 1px solid black;
  color: red;
  padding: 8px;
}
Quick Start

How to sort CSS properties

Splits each rule body at semicolons, pulls out the property name (text before the first colon), and re-emits in alphabetic order.

  1. 01

    Paste CSS

    Any standalone CSS — preprocessor output also works as long as it parses block-by-block.

    Parsing runs through Prettier’s standalone bundle (or the language-specific equivalent) loaded lazily — no parser ships until the tool is opened.

    cssPrettierASTstandalonelazy
    input · sourceraw · AST
    .a{color:red;background:white;}
    loaded · parsedAST · ready
  2. 02

    Block matcher runs

    A regex pulls each { ... } block; nested at-rules with their own braces are processed too.

    Indent width, tab style, and print-width re-format through a memoised pass — switching 2 → 4 spaces never re-parses, only re-prints.

    scanindentprint-widthmemoisedlive
    match · optionsrules · live
    {...} blocks
    options applied · livelive
  3. 03

    Watch props sort

    Within each block, declarations re-order alphabetically by property name. Values are untouched.

    The formatter is deterministic and idempotent: running it twice produces byte-identical output, which keeps diffs and git noise to a minimum.

    liveidempotentdeterministicdiff-cleanstable
    out · formattedsorted · ready
    .a {
  background: white;
  color: red;
}
    formatted · liveidempotent
  4. 04

    Copy or download

    Save as .css or copy to clipboard. Source stays in your browser.

    Download writes a Blob with the language-appropriate extension; copy uses navigator.clipboard.writeText so the output preserves all whitespace exactly.

    exportclipboardbloblanguage MIMEclient-side
    ok · copiedready · done
    OK Copied
    shipped · ready to shipsuccess
Pro tips

Formatting tips that keep diffs sane

Pick one config and pin it

Inconsistent formatting causes diff churn. Commit .prettierrc / .editorconfig and enforce in CI.

Format on save

Editor integration is faster feedback than a pre-commit hook. Use both for belt-and-braces.

Idempotency matters

Running the formatter twice should produce identical output. Test this on a representative file.

Match the language community

Default to community conventions: 2 spaces for JS/CSS, 4 for Python, tabs for Go. Fights over indent are a productivity tax.

Print-width drives wrapping

80, 100, and 120 are the common targets. Wider lines parse fast but review slower side-by-side.

Don’t mix formatters and linters

Prettier handles whitespace; ESLint handles correctness. Disable overlapping rules to avoid fight-club configs.

Related toolsCSS FormatterSCSS FormatterLess FormatterCSS MinifierSort Tailwind ClassesSort Imports
Use Cases

When to sort CSS properties

Design systems, diff cleanup, lint prep.

Design systems

Enforce a deterministic property order across files. Idempotent: running the formatter twice produces byte-identical output, which is the foundation of a clean CI gate. Pair with a pre-commit hook so PRs arrive already formatted, focusing review on logic.

idempotent

Diff cleanup

Stable order reduces noise in git history. Pairs with EditorConfig + .prettierrc for end-to-end consistency. Whitespace-only changes vanish so reviewers see real diffs, and git blame stays honest about who wrote what.

CI-ready

Style audits

Spot duplicate or shadowed declarations quickly. Output respects your indent width, tab style, and print-width — settings carry over for repeat runs. Switching 2-space to 4-space costs nothing in CPU but standardises an entire codebase.

diff-clean

Pre-stylelint

Clean before running stylelint property-order rule. Format-on-save is the fastest feedback loop; CI is the safety net. Together they make inconsistent indentation a thing of the past and free up review cycles for genuine concerns.

PR-friendly

Quick read

Make a dense rule block easier to skim. Whitespace-only changes don't trigger downstream content-hash invalidations, so CDN cache keys and CI cache layers stay warm. Real changes get all the rebuild budget.

review-ready

Docs examples

Standardise CSS examples for documentation. Pairs with linters (ESLint, Stylelint, pylint) that catch what formatting alone can't — bugs, unused imports, dead code. Each tool stays in its lane, and the codebase stays clean.

deterministic
FAQ

Frequently asked questions

No — strictly alphabetic. Tools like stylelint can sort by SMACSS / concentric / Recess if you need a logical group order.
No. Duplicates are preserved in their sorted positions.
--vars are sorted alphabetically like any other declaration.
Only top-level CSS nesting reliably. Deep SCSS nesting may need the SCSS formatter first.
No — sorting runs locally in your browser tab.
Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

Sent straight to the maintainers · no account needed
47 in queue·8 shipped this month
Request queued. Thanks!