CSS

Правила оформления CSS-кода

1. Синтаксис

1.1 В конце строки должна стоять точка с запятой

После пары свойство: значение обязательно ставится точка с запятой. Без этого знака препинания не будет работать правило в этой строке и следующее за ним.Хорошо: после каждого значения стоит точка с запятой

.selector {
  color: red;
  background-color: gray;
}

Плохо: после первого свойства пропущена точка с запятой

.selector {
  color: red
  background-color: gray;
}

1.2 Для отступов внутри правил используйте два пробела

Правила, которые перечисляются внутри фигурных скобок, должны отстоять от начала строки. Для этого иcпользуйте 2 пробела. Это позволяет сразу видеть блоки свойств, относящихся к одному селектору.Хорошо

.selector {
  color: red;
  background-color: gray;
}

Плохо

.selector {
color: red
   background-color: gray;
}

1.3 Значение цветов не сокращается

Если цвет задан в шестнадцатиричной системе, то значение не сокращается, а пишется полностью код из всех шести символов. Для записи используйте строчные буквы. Например, #e3e3e3.Хорошо

.selector {
  box-shadow: 0 1px 2px #cccccc, inset 0 1px 0 #ffffff;
}

Плохо

.selector {
  box-shadow: 0 1px 2px #CCC, inset 0 1px 0 #FFF;
}

1.4 Все пишется строчными буквами

Вce названия тегов и свойства пишутся строчными буквами.Хорошо

section {
  padding: 15px;
  margin-bottom: 10px;
}

Плохо

sEctiOn {
  PADDING: 15px;
  Margin-Bottom: 10px;
}

1.5 Нули не пропускаются

Если число дробное и начинается с нуля, то он не опускается (например, .5 вместо 0.5).Хорошо

.selector {
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0.7;
}

Плохо

.selector {
  background-color: rgba(0, 0, 0, .5);
  opacity: .7;
}

1.6 Используйте двойные кавычки

В стилях всегда без исключения используются двойные кавычки. Если кавычки не обязательны, то они пишутся все равно.Хорошо

.selector[type="text"] { ... }

Плохо

.selector[type=text] { ... }

1.7 Пробел после двоеточия

В правилах после двоеточия ставится один пробел (top: 10px;). При этом перед двоеточием пробел не нужен.Хорошо

.selector {
  padding: 15px;
  margin-bottom: 10px;
}

Плохо

.selector {
  padding:15px;
  margin-bottom: 10px ;
}

1.8 Пробелы после запятой в цветах

После запятых внутри значений rgb(), rgba(), hsl(), hsla() или rect() пробелы ставятся. Это улучшает читаемость.Хорошо

.selector {
  background-color: rgba(0, 0, 0, 0.5);
}

Плохо

.selector {
  background-color: rgba(0,0,0,0.5);
}

1.9 Пробел до и после комбинатора

Между селекторами до и после комбинатора (например, p > a) ставится один пробел.Хорошо

ol > li { ... }

Плохо

ol>li { ... }

1.10 Каждое свойство с новой строки

Одно свойство — одна строка. Каждое объявление в правиле пишется на новой строке.Хорошо

.selector {
  color: red;
  background-color: gray;
  padding: 15px;
  margin-bottom: 10px;
}

Плохо

.selector {
  color: red; background-color: gray; padding: 15px; margin-bottom: 10px;
}

1.11 Пробел перед фигурной скобкой

После селектора и перед открывающейся фигурной скобкой ставится один пробел. После открывшейся скобки запись идёт с новой строки.Хорошо

.selector {
  color: red;
  background-color: gray;
  padding: 15px;
  margin-bottom: 10px;
}

Плохо

.selector{color: red;
  background-color: gray;
  padding: 15px;
  margin-bottom: 10px;
}

1.12 Закрывающая фигурная скобка на новой строке

Закрывающая фигурная скобка после набора свойств пишется на новой строке и без отступа. Она должна быть на одном уровне с селектором. Следующее после этого правило отделяется пустой строкой.Хорошо

.selector {
  color: red;
}

.selector-item {
  color: black;
}

Плохо

.selector {
  color: red;}
.selector-item {
  color: black;
  }

1.13 Опускайте единицы измерения

Единицы измерения не нужно писать там, где без них можно обойтись. Например, border: 0.Хорошо

.selector {
  border: 0;
  box-shadow: 0 1px 2px #cccccc, inset 0 1px 0 #ffffff;
}

Плохо

.selector {
  border: 0px;
  box-shadow: 0px 1px 2px #cccccc, inset 0px 1px 0px #ffffff;
}

2. Порядок свойств

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

  1. Позиционирование

  2. Блочная модель

  3. Типографика

  4. Оформление

  5. Анимация

  6. Разное

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

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

Сгруппированные свойства в правиле отделяются друг от друга пустой строкой.

Порядок объявления подробных правил, таких как font-size, font-family, line-height, должен соответствовать порядку в сокращённой версии правила. В случае совместного использования подробных и сокращённых правил, первой должна идти сокращённая версия.

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

  /* Блочная модель */
  display: inline-block;
  float: left;
  width: 150px;
  height: 150px;
  margin: 25px;
  padding: 25px;

  /* Типографика */
  font: normal 13px/1.5 "Helvetica", sans-serif;
  font-style: normal;
  font-size: 13px;
  line-height: 1.5;
  font-family: "Helvetica", sans-serif;
  text-align: start;

  /* Оформление */
  color: #999999;
  background-color: #e3e3e3;
  border: 1px solid #333333;
  border-radius: 5px;
  opacity: 1;

  /* Анимация */
  transition: all 0.8s;

  /* Разное */
  will-change: auto;
}

3. Имена классов

  • Имена классов пишутся строчными буквами, между несколькими словами используется дефис (но не знак нижнего подчёркивания или camelCase). Дефисы служат разделителями во взаимосвязанных классах (например, .button и .button-cancel).

  • Имена должны быть такими, чтобы по ним можно было быстро определить, какому элементу на странице задан класс: избегайте сокращений (единственное исключение — .btn для кнопок), но не делайте их слишком длинными (не более трёх слов).

  • Для именования классов используются английские слова и термины. Не используйте транслит для названия классов и атрибутов.

Хорошо

.alert-info { … }
.tweet .user-picture { … }
.button { … }
.layout-center { … }

Плохо

.testElement { … }
.t { … }
.big_green_button { … }
.knopka { … }

4. Правило @import

Правило @import работает медленнее, чем тег <link>. В стилях @import использовать не желательно.Хорошо: подключение тегом link

<link rel="stylesheet" href="module.css">

Плохо

<style>
  @import url("module.css");
</style>
PreviousHTMLNextPopular Class Naming

Last updated

Was this helpful?