CSS Property Sorter

A large part of the friction in reviewing CSS comes from noise. When declaration order is arbitrary, two developers adding the same property to the same rule will put it in different places, and a formatter run or an editor plugin can rewrite a block that nobody meaningfully changed. Diffs then contain lines that need reading but carry no information. Fixing the order with a tool makes the position of every declaration a function of its name, which means a diff shows only what actually changed — and that is what makes CSS review worth doing.

Before sorting a stylesheet you did not write, search it for repeated properties inside a single rule. The pattern looks like a plain value followed by a more modern one — a hex colour before an rgba colour, a pixel width before a value using a viewport unit, or a plain declaration before one wrapped in a vendor prefix. That repetition is a deliberate fallback that relies on source order, and it is the only common case where alphabetising changes behaviour. Everything else in a typical stylesheet is safe.

In the overwhelming majority of rules, no — declaration order within a rule does not affect which styles apply. The exception that matters is when the same property is declared twice in one rule, which is how people write fallbacks for older browsers (a hex colour followed by an rgba one, for example). There the later declaration wins, so reordering changes the outcome. Scan for duplicated properties before sorting, and be especially careful with shorthand-then-longhand pairs such as background followed by background-size, where the shorthand resets what the longhand set.

Consistency makes stylesheets faster to read and much easier to diff. When every rule lists its declarations in the same order, you can scan for a property in a fixed position rather than reading the whole block, and code review stops surfacing changes that are really just someone adding a line in a different place. It also removes an entire category of pointless review comment, because the order is decided by a tool rather than by whoever touched the file last.

It is the most common and by far the easiest to apply mechanically, which is why this tool uses it. Some teams prefer grouping by concern instead — positioning first, then box model, then typography, then visual details — on the argument that it matches how you reason about a layout. That grouping reads well but needs judgement about which group a property belongs to, so it is hard to enforce without a linter like Stylelint and an agreed property-order config.

No, and that is deliberate. Rule order in CSS is meaningful: when two selectors have equal specificity, the one declared later wins. Reordering rules could silently change your page, so this tool only ever sorts declarations inside a rule and leaves the sequence of rules exactly as you wrote it.

No. Every one of these tools runs entirely in your browser using JavaScript. Your stylesheet is never uploaded, never logged, and never sent to any server — you can confirm this by opening your browser devtools Network tab while you work, or by disconnecting from the internet after the page loads and watching everything continue to function. That makes it safe to paste proprietary or client CSS.