CSS Property Sorter
Alphabetize the declarations inside every rule in one click. Sorted properties make duplicates obvious, diffs smaller, and 'where's the padding?' a solved question forever.
Settings
The CSS you need to build this yourself
Understand the output, not just copy it — these lessons on our learning path teach exactly what this tool automates:
Related generators & tools
- CSS Comment RemoverCode Quality
- CSS Minifier & FormatterDeveloper Tools
- CSS Validator & Syntax CheckerValidators & Checkers
- CSS Diff CheckerCode Quality
- CSS Gzip Size EstimatorCode Quality
How it works
The sorter finds every { … } block, splits its declarations, and reorders them alphabetically by property name — nothing else moves. Rule order, selectors and values are untouched, so the cascade behaves identically.
Why teams do this: with a fixed order, two developers writing the same rule produce identical bytes, duplicate properties sit adjacent where you can't miss them, and diffs shrink to real changes. (The other school sorts by group — layout, box, type, paint; alphabetical wins by being unambiguous.)
Run the code — try it yourself
Sort this rule's declarations alphabetically by hand — then verify against the tool. (Spot the duplicate the sorting reveals.)
Frequently asked questions
Can sorting ever change behavior?
Only if a rule declares the same property twice — then last-one-wins order matters, and sorting surfaces the duplicate so you can delete it. That's a feature.
Does it handle nested @media blocks?
Rules inside media queries sort fine; the at-rule wrapper itself stays put.
Shorthand and longhand of the same property?
They sort by name like everything else — but seeing border and border-top adjacent is exactly how you notice the redundancy.
Keep going
Consistency is a team gift: pick an order, automate it, never discuss it again. Combine with the Comment Remover and Minifier for a full pre-ship cleanup.
CSSmatic is a non-profit project, made by developers for developers.