Сортировка CSS-стилей — порядок в коде и голове

При работе с CSS или styled-components легко запутаться, если стили записаны в случайном порядке. Это усложняет чтение, ревью, рефакторинг и может приводить к ошибкам.

Один из простейших способов сделать стили понятнее — сортировать CSS-свойства по логике.

👎 Как выглядит несортированный код

.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;
}

Стили перемешаны — визуальные, позиционирование, шрифты. Это мешает воспринимать структуру компонента.

👍 Как выглядит отсортированный код

.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;
}

Теперь всё структурировано:

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

✅ Зачем сортировать CSS-свойства

• 📚 Упрощает чтение кода
• 🔍 Быстрее ревью
• ❌ Меньше конфликтов в Git
• 🧠 Понятнее структура компонента
• 🚀 Проще искать нужное свойство

⚙️ Как настраивать сортировку

Лучше всего использовать автоматические инструменты:

1. stylelint

Плагин stylelint-order позволяет задать порядок свойств.

npm install stylelint stylelint-order --save-dev

Пример .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

Если вы используете Tailwind или styled-components, плагин prettier-plugin-tailwindcss может сортировать утилиты по умолчанию.

npm install -D prettier prettier-plugin-tailwindcss

📝 Вывод

Сортировка CSS-свойств — простая привычка, которая:

• делает ваш код чище,
• делает работу команды проще,
• если свойства идут в логическом порядке, меньше шансов на переопределение,
• делает ревью быстрее.

🔧 Настройте автоматическую сортировку — и забудьте про хаос в стилях.