Насколько важен порядок свойств в CSS?

Question

[Testtest132]

Хотелось быть знать, есть разница между порядком свойств:

div {
  margin: 1px 0px 1px 1px !important;
  zoom: 1;
  padding: 4px !important;
  vertical-align: top;
  color: #45688E;
  background: #D5DDE5;
}

и если напишу вот так:

div {
  zoom: 1;
  background: #D5DDE5;
  margin: 1px 0px 1px 1px !important;
  padding: 4px !important;
  vertical-align: top;
  color: #45688E;
}

Возможно существуют правила "хорошего тона" в расположении CSS-свойств, наподобие как в JavaSctipt - отступы, именования констант, переменных и т.д.

Answer 1

[Елена]

Общая логика сортировки: «от общего — к локальному и менее важному». Рекомендуется располагать свойства в следующем порядке:

1. Сначала положение элемента относительно других:
position, left/right/top/bottom, float, clear, z-index.
2. Затем размеры и отступы:
width, height, margin, padding…
3. Рамка border, она частично относится к размерам.
4. Общее оформление содержимого:
list-style-type, overflow…
5. Цветовое и стилевое оформление:
background, color, font…

Comments

[Евгений Петров]

overflow настолько важно, что я его указываю первым.
Наряду с самым важным display.
А в остальном всё согласуется с моим представлением.

Answer 2

[Евгений Петров]

!important и zoom: 1; — вот это признаки крайне плохого тона.
А порядок правил для селекторов не имеет никакого значения — это просто хэш, а порядок ключей в хэше никого не может волновать.

Есть личные предпочтения — мне удобней перечислять самые важные вначале блока, а не слишком важные в конце. Другие любят в алфавитном порядке. Как удобней, так и правильно.

Comments

[Testtest132]

Спасибо.
P.S. Этот код взял из ВК для примера.

Answer 3

[Талга УтБ]

по сути последовательность не нужна, браузер не такой и глупый :)
а для работы в команде лучше придерживаться какого-то стиля либо использовать постпроцессор (csscomb или другое)

Comments

[vmaevskii]

csscomb действительно отличный плагин. Знаю, что он есть для sublime.