К Оптимусу Прайму. Группировка CSS свойств

Привет еще раз, дорогой Оптимус.

В последнем письме я писал тебе о сортировке CSS свойств по алфавиту. Почему ты мне в ответ не пишешь? Я же твой самый большой и главный фанат. Мне нужен твой совет, слышишь?

Вместо того, чтобы сортировать CSS свойства, можно сгруппировать их по типу. Например, ребята из Яндекса используют 7 групп:

• позиционирование (position, top, …, z-index);
• блочная модель (display, float, …, overflow);
• размеры (width, height, margin, padding, …);
• таблицы/списки (border-collapse, list-style, …);
• визуальщина (transition, transform, cursor, text-transform, …);
• цвета (opacity, color, border, background, …);
• шрифт (font-*, line-height).

Вот так выглядит CSS, разбитый по этим группам:

.score {
  position: relative;
  z-index: 10;

  float: left;

  margin: 13px 0;
  padding: 14px 0;

  text-align: center;
  vertical-align: middle;

  background-color: #fff;
  border-radius: 20px;

  font-size: 12px;
  font-size: 16px;
  line-height: 14px;
}

Такой CSS удобно читать и редактировать. Связанные свойства (position и z-index, margin и padding, font-size и line-height) находятся рядом. Важные группы идут первыми: позиционирование, раскладка, размеры. Когда работаешь с одной конкретной группой свойств, легче заметить дублирующиеся: повторяющийся font-size бросается в глаза в блоке из 3 свойств.

Проблема здесь одна: нужно думать. Нужно понимать CSS, нужно знать, к какой группе относится свойство. Ребята, «лишь бы в Хроме работало», не смогут разбить свойства, которые не понимают, на группы, в которых не разбираются.

Оптимус, от тебя фанатеет вся Земля. Я все твои цитаты знаю наизусть. Но письма без ответа на меня наводят грусть. Что скажешь, как тебе такие группировки? Жду письма!

P. S. Ты обязательно должен мне ответить, потому что я твой верный фанат.

P. S. Ещё больше постов о программировании, тестах и культуре разработки у меня в Телеграме.