CSS Property Sorting — Clean Code Starts Here

When working with CSS or styled-components, it’s easy to get lost if properties are written in a random order. It makes code harder to read, review, and refactor — and increases the chance of mistakes.

One of the easiest ways to keep things clean is to sort CSS properties logically.

👎 What Unsordered Code Looks Like

.button {
	color: white;
	display: flex;
	padding: 12px;
	border-radius: 8px;
	background: #000;
	font-size: 16px;
}
 
.buttonTwo {
	background: red;
	font-size: 20px;
	display: flex;
	border-radius: 20px;
	padding: 18px;
	color: green;
}
 
.buttonThree {
	font-size: 26px;
	padding: 20px;
	color: red;
	display: flex;
	border-radius: 30px;
	background: yellow;
}

Properties are mixed — visual, layout, fonts. It’s hard to grasp the structure of the component.

👍 What Sorted Code Looks Like

.button {
	display: flex;
	padding: 12px;
	border-radius: 8px;
	background: #000;
	color: white;
	font-size: 16px;
}
 
.buttonTwo {
	display: flex;
	padding: 18px;
	border-radius: 20px;
	background: red;
	color: green;
	font-size: 20px;
}
 
.buttonThree {
	display: flex;
	padding: 20px;
	border-radius: 30px;
	background: yellow;
	color: white;
	font-size: 26px;
}

Now everything is structured:

1. Layout — display, padding, margin
2. Box — border, background, box-shadow
3. Typography — color, font-*, line-height

✅ Why Sort CSS Properties

• 📚 Easier to read
• 🔍 Faster code review
• ❌ Fewer Git conflicts
• 🧠 Clearer component structure
• 🚀 Faster navigation and debugging

⚙️ How to Set It Up

The best way is to automate it:

1. stylelint

Use the stylelint-order plugin to define your property order.

npm install stylelint stylelint-order --save-dev

Sample .stylelintrc.json:

{
	"plugins": ["stylelint-order"],
	"rules": {
		"order/properties-order": [
			"display",
			"position",
			"top",
			"right",
			"bottom",
			"left",
			"margin",
			"padding",
			"width",
			"height",
			"background",
			"border",
			"box-shadow",
			"color",
			"font-size",
			"line-height"
		]
	}
}

2. Prettier + Plugin

If you’re using Tailwind or styled-components, prettier-plugin-tailwindcss automatically sorts utilities.

npm install -D prettier prettier-plugin-tailwindcss

📝 Conclusion

Sorting your CSS properties is a small habit with a big payoff:

• your code becomes cleaner,
• your team works faster,
• If properties follow a logical order, there’s less chance of unintended overrides,
• reviews are smoother.

🔧 Automate the sorting — and forget about messy styles forever.