CSS
Правила оформления CSS-кода
1. Синтаксис
1.1 В конце строки должна стоять точка с запятой
После пары свойство: значение обязательно ставится точка с запятой. Без этого знака препинания не будет работать правило в этой строке и следующее за ним.Хорошо: после каждого значения стоит точка с запятой
Плохо: после первого свойства пропущена точка с запятой
1.2 Для отступов внутри правил используйте два пробела
Правила, которые перечисляются внутри фигурных скобок, должны отстоять от начала строки. Для этого иcпользуйте 2 пробела. Это позволяет сразу видеть блоки свойств, относящихся к одному селектору.Хорошо
Плохо
1.3 Значение цветов не сокращается
Если цвет задан в шестнадцатиричной системе, то значение не сокращается, а пишется полностью код из всех шести символов. Для записи используйте строчные буквы. Например, #e3e3e3
.Хорошо
Плохо
1.4 Все пишется строчными буквами
Вce названия тегов и свойства пишутся строчными буквами.Хорошо
Плохо
1.5 Нули не пропускаются
Если число дробное и начинается с нуля, то он не опускается (например, .5
вместо 0.5
).Хорошо
Плохо
1.6 Используйте двойные кавычки
В стилях всегда без исключения используются двойные кавычки. Если кавычки не обязательны, то они пишутся все равно.Хорошо
Плохо
1.7 Пробел после двоеточия
В правилах после двоеточия ставится один пробел (top: 10px;
). При этом перед двоеточием пробел не нужен.Хорошо
Плохо
1.8 Пробелы после запятой в цветах
После запятых внутри значений rgb()
, rgba()
, hsl()
, hsla()
или rect()
пробелы ставятся. Это улучшает читаемость.Хорошо
Плохо
1.9 Пробел до и после комбинатора
Между селекторами до и после комбинатора (например, p > a
) ставится один пробел.Хорошо
Плохо
1.10 Каждое свойство с новой строки
Одно свойство — одна строка. Каждое объявление в правиле пишется на новой строке.Хорошо
Плохо
1.11 Пробел перед фигурной скобкой
После селектора и перед открывающейся фигурной скобкой ставится один пробел. После открывшейся скобки запись идёт с новой строки.Хорошо
Плохо
1.12 Закрывающая фигурная скобка на новой строке
Закрывающая фигурная скобка после набора свойств пишется на новой строке и без отступа. Она должна быть на одном уровне с селектором. Следующее после этого правило отделяется пустой строкой.Хорошо
Плохо
1.13 Опускайте единицы измерения
Единицы измерения не нужно писать там, где без них можно обойтись. Например, border: 0
.Хорошо
Плохо
2. Порядок свойств
Порядок логически связанных свойств должен быть сгруппирован следующим образом:
Позиционирование
Блочная модель
Типографика
Оформление
Анимация
Разное
Позиционирование следует первым, поскольку оно влияет на положение блоков в потоке документа. Блочная модель определяет размеры и расположение блоков и идёт следующей.
Все прочие объявления, которые изменяют вид внутренних частей блоков и не влияют на другие блоки, идут в последнюю очередь.
Сгруппированные свойства в правиле отделяются друг от друга пустой строкой.
Порядок объявления подробных правил, таких как font-size
, font-family
, line-height
, должен соответствовать порядку в сокращённой версии правила. В случае совместного использования подробных и сокращённых правил, первой должна идти сокращённая версия.
3. Имена классов
Имена классов пишутся строчными буквами, между несколькими словами используется дефис (но не знак нижнего подчёркивания или camelCase). Дефисы служат разделителями во взаимосвязанных классах (например,
.button
и.button-cancel
).Имена должны быть такими, чтобы по ним можно было быстро определить, какому элементу на странице задан класс: избегайте сокращений (единственное исключение —
.btn
для кнопок), но не делайте их слишком длинными (не более трёх слов).Для именования классов используются английские слова и термины. Не используйте транслит для названия классов и атрибутов.
Хорошо
Плохо
4. Правило @import
@import
Правило @import
работает медленнее, чем тег <link>
. В стилях @import
использовать не желательно.Хорошо: подключение тегом link
Плохо
Last updated