48  /  381
Справочник

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

Просмотров: 19836
Дата последнего изменения: 10.08.2020
Роберт Басыров
Сложность урока:
2 уровень - несложные понятия и действия, но не расслабляйтесь.
1
2
3
4
5
Недоступно в лицензиях:
Ограничений нет
  • При создании правила для нескольких селекторов помещайте каждый селектор на отдельной строке.
  • Перед открывающей скобкой ставьте один пробел.
  • Внутри блока объявлений помещайте каждое объявление на отдельной строке.
  • Добавляйте один уровень отступов перед каждым объявлением.
  • Ставьте пробел после двоеточия внутри объявления.
  • Всегда ставьте точку с запятой после последнего объявления в блоке.
  • Ставьте закрывающую скобку на одной вертикальной линии с первым символом в селекторе.
  • Ставьте пробел после каждой запятой в объявлениях со множественным значением.
  • Разделяйте правила пустой строкой.
  • Сортируйте свойства по принципу: свойства, сильно влияющие на элемент, в начале, а самые незначительно влияющие - в конце:
    • 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С-Битрикс»

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