Правила форматирования CSS

Просмотров: 19836
Дата последнего изменения: 10.08.2020

Роберт Басыров

Сложность урока:

2 уровень - несложные понятия и действия, но не расслабляйтесь.

Недоступно в лицензиях:

Ограничений нет

При создании правила для нескольких селекторов помещайте каждый селектор на отдельной строке.
Перед открывающей скобкой ставьте один пробел.
Внутри блока объявлений помещайте каждое объявление на отдельной строке.
Добавляйте один уровень отступов перед каждым объявлением.
Ставьте пробел после двоеточия внутри объявления.
Всегда ставьте точку с запятой после последнего объявления в блоке.
Ставьте закрывающую скобку на одной вертикальной линии с первым символом в селекторе.
Ставьте пробел после каждой запятой в объявлениях со множественным значением.
Разделяйте правила пустой строкой.

Сортируйте свойства по принципу: свойства, сильно влияющие на элемент, в начале, а самые незначительно влияющие - в конце:

Display
Позиционирование (position/float)
Боксовая модель (width/height/margin/padding/border/box-sizing)
Цвета и типографика
Остальное

Плохо:

    .crm-lead-form { margin: 34px; color: #000; }
    .crm-lead-title, .crm-invoice-title, .crm-company-title
    {
        position: relative;
        background: #000;
        height: 15px;
        padding: 10px;
        border: 1px solid red;
        margin: 12px 0 17px;
        display: block;
        color: #fff;
        width: 15px;
    }

Хорошо:

    .crm-lead-form {
        margin: 34px;
        color: #000;
    }

    .crm-lead-title,
    .crm-invoice-title,
    .crm-company-title {
        display: block;
        position: relative;
        width: 15px;
        height: 15px;
        padding: 10px;
        border: 1px solid red;
        margin: 12px 0 17px;
        color: #fff;
        background: #000;
    }

Для значений с пробелами (font-family, url()) и для свойства content используйте двойные кавычки.

    .disk-user-profile {
        font-family: "Helvetica Neue Light", Helvetica, Arial, sans-serif;
    }

    .disk-user-profile:after {
        display: block;
        content: "";
    }

Исключения
К большим группам правил, состоящих из одного свойства, может применяться запись в одну строку. В таком случае следует ставить пробел после открывающей и перед закрывающей скобками.
```
        .crm-column-title { width: 10%; }
        .crm-column-author { width: 20%; }
        .crm-column-actions { width: 30%; }

        .menu-icon-create { background-position: 0 0; }
        .menu-icon-delete { background-position: -15px -35px; }
        .menu-icon-approve { background-position: -34px -35px; }
```
Длинные значения свойств, разделяемые запятыми - как, например, набор градиентов или теней - могут быть помещены на отдельной строке каждое, чтобы повысить читабельность кода и сообщений в системе управления версиями. Формат записи может слегка различаться, один из вариантов приведён ниже.
```
        .disk-info-popup {
            box-shadow:
                1px 1px 1px #000,
                2px 2px 1px 1px #ccc inset;
            background-image:
                linear-gradient(#fff, #ccc),
                linear-gradient(#f3c, #4ec);
        }
```

Курсы разработаны в компании «1С-Битрикс»

Если вы нашли неточность в тексте, непонятное объяснение, пожалуйста, сообщите нам об этом в комментариях.

Развернуть комментарии