О личных правилах сортировки CSS

Форматировать код хорошо и правильно. Здорово когда это происходит по определённым законам, принятым большинством разработчиков отрасли.

В CSS существуют де-факто общепринятый стандарт, который формализовали и описали ребята из гугла → https://google.github.io/styleguide/htmlcssguide.html и всё в их гайде здорово и приятно кроме предложения располагать цсс-свойства в алфавитном порядке.

У меня вошло в привычку группировать свойства по назначению.

1. Начинаю всегда с того как должен отображаться элемент, свойства display. Если работаю с флекс-контейнером, то следом описываю его свойства.
2. После описываю поля, рамки и отступы: padding, border, margin.
3. Дальше определяю параметры позиционирования: position, top, right, bottom, left. Смещение элемента описываю против часовой стрелки, примерно так же, как это указывается у полей и отступов.
4. Следом идут свойства определяющие параметры и внешний вид текста: font, line-height, text-decoration, text-transform, color. Свойств, управляющих текстом, конечно, намного больше, я указал лишь некоторые для примера.
5. Продолжаю оформлением, трансформациями и анимациями: box-shadow, background, transform, transition и др.
6. А потом все остальные свойства, которые встречаются далеко не у каждого элемента. Да, их вполне можно разместить в алфавитном порядке.

Пример описания блока:

.content-frame {
    display: block;

    padding: 0 12px;
    border: 1px solid #333;
    margin: 16px 0 32px;

    position: relative;
    left: −4px;

    font: 300 18px/24px Helvetica, sans-serif;
    color: #333;

    background: #eee;
    box-shadow: 0 2px 2px rgba(0,0,0,0.12);
}

Сортирую подобным образом свойства я уже года три. Когда поделился способом в комментариях на одном ресурсе, мне сказали, что нечто похожее рекомендует «Вордпресс» https://make.wordpress.org/core/handbook/best-practices/coding-standards/css/#property-ordering. Ну что же неудивительно, что разные люди приходят ко схожим выводам.