Skip to content

CSS

Jump to bottom
Denis Zyulev edited this page Jan 10, 2019 · 1 revision

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

Синтаксис

  • Шестнадцатеричное значение цвета не сокращается, а пишется полностью из всех шести символов. Для записи используются строчные буквы. Например, #f5f5f5.
  • Названия тегов и свойств в правилах пишутся строчными буквами.
  • Во всех случаях в стилях используются только двойные или одинарные кавычки, но не сразу два стиля сразу. В необязательных случаях кавычки не опускаются.
  • После двоеточия в правилах ставится один пробел top: 10px;
  • После запятых внутри значений rgb(), rgba(), hsl(), hsla() или rect() пробелы ставятся. Это повышает читаемость.

Неверно

.selector {
  color: rgb(0,0,0);
}

Верно

.selector {
  color: rgb(0, 0 ,0);
}
  • До и после комбинатора между селекторами (например, p > a, div ~ a) ставится один пробел.
  • Не задавать глобальные стили для тегов. Исключения уникальные теги <html> и <body>, normalize.css
  • Каждый селектор на новой строке

Неверно

.selector-one, .selector-two {
  color: #f5f5f5;
}

Верно

.selector-one,
.selector-two {
  color: #f5f5f5;
}
  • Единицы измерения не пишутся, там где в них нет необходимости. Например, border: 0

Именование классов

  • Запрещено слишком длинное именование классов, не более трех слов (исключение, именование по БЭМ)

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

  • Для работы с JavaScript классы именовать начиная с приставки js: js-menu, js-modal и прочее. Создавать какие-то css-правила для этих классов не стоит

  • Для состояний (активный пункт меню, невалидное значение) классы именовать начиная с приставки is: is-active, is-error и т.д. Прописывать правила для таких классов вместе с теми селекторами, к которым они относятся:

Неверно

.header-navigation-block-menu > a  {
  color: #f5f5f5;
}
.header-navigation-block-menu >
a.nav-active-item  {
  color: #f5f5f5;
}
.novosti-list {
  display: flex;
}

Верно

.nav-menu > a {
  color: #404040;
}
.nav-menu > a.is-active {
  color: #4caf50;
}
.news-list {
  display: flex;
}

Организация кода

  • Различные части кода должны быть логически разделены.
  • Часто используемые значения должны быть вынесены в переменные (например, цвет, ширину для @media правил, типографика и т.д.). Для составления сложных имен использовать дефис и начинать именование переменной с символа $ (если препроцессор не требует иного, как stylus) : $black, $dark-red.
  • Для повторяющихся правил (например, для позиционирования по центру и прочее) пишите миксины. Именование миксина лучше начинать с какого-нибудь префикса, например с префикса x-. Это позволит избежать путаницы.

Неверно

.nav-menu a {
  color: #f5f5f5;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.user-menu a {
  color: #f5f5f5;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

Верно

/* Sass */
@mixin x-bordered ($color)  {
  border-top: dotted 1px $color;
  border-bottom: solid 2px$color;
}
.nav-menu a {
  color: #f5f5f5;
  @include x-bordered (#404040);
}
.user-menu a {
  color: #f5f5f5;
  @include x-bordered (#404040);
}

Clone this wiki locally