Как правильно группировать/разделять свойства Css в рамках одного объявления?

Question

[Рома Зварич]

Здравствуйте.
Нашел рекомендацию группировать/разделять CSS-свойства в рамках одного объявления для лучшего восприятия по приблизительно такой схеме (без названий в комментариях, это просто подсказка).

Но мне не всегда понятно, в какой раздел помещать, например, свойства трансформации.

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

.declaration-order {
    /* Позиционирование */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;

    /* Box-model (размеры и отступы) */
    display: block;
    float: right;
    width: 100px;
    height: 100px;
    padding: 20px;
    margin-bottom: 40px;

    /* Типографика */
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    color: #333;
    text-align: center;

    /* Визаулизация */
    background-color: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    opacity: 1;

    /* Переходы, анимация */
    transition: all 1s;
    animation: anime 1s infinite;

    /* Всякое */
}

Comments

[Rustam Bainazarov]

Правильного нет на самом деле, но подход хороший. Вручную это делать, конечно, вообще не стоит. Раньше для этого был CSS Comb для предпродакшена. Что сейчас — не знаю, к сожалению.

Хотя я вручную группирую всегда правила на автомате уже.

P. S. Группировка свойств в рамках одного правила не влияет на функциональность. Это лишь для красоты и читабельности кода.

[FeST1VaL]

ну я лично специально не разделаю (просто на автомате пишу порядок).
В sublime есть плагин для этого, помоему css comb, он переставляет и разделяет автоматически.

[Рома Зварич]

Рустам Байназаров, понятно, что на функционал не влияет.
Я просто пытаюсь понять, можно ли группировать еще как-то более удобочитаемо.

[alex]

Рома Зварич,

Как правильно

использовать для этого инструменты на уровне сборщика, что-то вроде линтера/prettier для css. т.е. автоматизировать это дело, иначе zaebetes' вручную это делать. если работаете один можно на уровне редактора кода с помощью плагина. а насчет того, какое свойство в какую группу кидать, тут как говрится - сколько людей столько и мнений

[Rustam Bainazarov]

Рома Зварич, вполне адекватно у вас сделано выше.

Answer 1

[ⓒⓢⓢ]

вручную, конечно, следить за этим, так себе затея.
для этого есть линтеры, https://www.npmjs.com/package/stylelint
и предопределённые правила