RDI Codestyle

Синтаксис
Валидность
HTML-доктайп
Кодировка символов
Подключение стилей
Подключение скриптов
Порядок атрибутов
Логические атрибуты
Подписи полей ввода
Размеры картинок
Атрибут языка

CSS

Синтаксис
Использование символа &
Порядок свойств
Имена классов
Правило @import
Варианты шрифта

HTML

Синтаксис

Для отступов у вложенных элементов рекомендуется использовать два пробела (либо таб, равный двум пробелам). Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
Теги и их атрибуты пишутся строчными буквами. Для значений атрибутов всегда используются двойные кавычки.
Необязательный закрывающий слеш у одиночных тегов (<img>, <br> и другие) не ставится.
Необязательные закрывающие теги (например, </li> или </body>) не пропускаются.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Страница о коте</title>
  </head>
  <body>
    <article class="post">
      <h1>Красивый кот</h1>
      <figure class="post-item">
        <img src="cat.jpg" alt="Изображение кота">
        <figcaption>Кот красив!</figcaption>
      </figure>
    </article>
  </body>
</html>

Валидность

Документ должен проходить проверку на валидность. Для проверки используется современный валидатор.

HTML-доктайп

В начале страницы обязательно должен быть указан актуальный DOCTYPE, чтобы браузер отображал её в режиме соответствия стандартам. Это гарантирует, что страница будет выглядеть единообразно во всех современных браузерах.

В случае верстки email-шаблонов, DOCTYPE должен иметь следующее значение:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<!DOCTYPE html>
<html lang="ru">
  <head>…</head>
  <body>…</body>
</html>

Кодировка символов

Кодировка символов на странице всегда должна быть явно указана, чтобы обеспечить корректное отображение текста. Кодировка utf-8 предпочтительна.

<head>
  <meta charset="utf-8">
  <title>Заголовок страницы</title>
</head>

Подключение стилей

Стилевые файлы с помощью <link> подключаются внутри <head>. При этом атрибут type для тега <link> не указывается, так как его значение text/css устанавливается по умолчанию.

<!-- Хорошо: стилевой файл подключён в секции head -->
<!DOCTYPE html>
<html lang="ru">
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>…</body>
</html>

<!-- Плохо: стилевой файл подключён в секции body -->
<!DOCTYPE html>
<html lang="ru">
  <head>…</head>
  <body>
    <link rel="stylesheet" href="style.css">
  </body>
</html>

Порядок атрибутов

Атрибут класса у HTML-элементов пишется первым. Единообразное написание помогает легче считывать код и быстрее разбираться в назначении блоков по их классам.

Следующим указвается атрибут id, после него — атрибуты пути (src, srcset, href). Остальные атрибуты указываются в алфавитном порядке.

Исключением является тег <input>. Для данного тега атрибут type указывается первым. После — все атрибуты согласно обозначенным выше правилам.

Имена классов в атрибуте класса указываются в следующем порядке: общие стили модификатора/элемента/блока, кастомные стили для данного модификатора/элемента/блока, общие стили для модификатора/элемента/блока из внешних библиотек, частные (конкретные) стили для модификатора/элемента/блока из внешних библиотек.

<a class="qulix-form qulix-form__element element element--big" id="element" href="/" data-name="element">Ссылка</a>

<input type="text" class="form-control" name="test">

<img class="pets-picture" src="cats.jpg" alt="Изображение котиков">

Логические атрибуты

Для логических атрибутов (например, checked, disabled, required) значение не указывается, а сами атрибуты указываются последними и в алфавитном порядке.

<!-- checked="checked" необязательно -->
<input type="checkbox" checked required>

<input type="text" disabled>

<select>
  <option value="1" selected>1</option>
</select>

Подписи полей ввода

Для улучшения взаимодействия пользователя с элементами форм, при нажатии на подпись поля, оно должно активироваться. Для этого элемент формы связывается с его описанием с помощью идентификатора и атрибута for тега <label>.

<!-- Хорошо: элемент формы radio связан с подписью через идентификатор -->
<input type="radio" id="choose">
<label for="choose">Радио кнопка</label>

<!-- Хорошо: элемент формы radio и подпись обёрнуты в label -->
<label>
  <input type="radio"> Радио кнопка
</label>

<!-- Плохо: подпись не связана с элементом формы -->
<input type="radio" id="choose"> Радио кнопка

Размеры картинок

В HTML-коде должны быть указаны ширина и высота векторных картинок, так как векторные картинки могут заполнить всю ширину родителя.

Важно: в атрибутах width и height нельзя использовать px, так как по спецификации размеры в пикселях задаются без единиц измерения. Проценты использовать можно, если картинка должна растягиваться.

Для адаптивных изображений, у которых есть версии с разными размерами и пропорциями (например, заданы через тег <sources> в элементе <picture>), размеры в <img> в HTML можно не задавать.

<!-- Хорошо: размеры картинке заданы -->
<div class="logo-area">
  <img src="logo.svg" alt="" width="300" height="150">
</div>

<!-- Хорошо: адаптивному изображению не задан размер в HTML -->
<picture>
  <source media="(min-width: 1150px)" srcset="img/logo-desktop.svg">
  <source media="(min-width: 768px)" srcset="img/logo-tablet.svg">
  <img class="logo__icon" src="img/logo-mobile.svg" alt="Логотип" height="35" width="86">
</picture>

<!-- Плохо: размеры картинке не заданы -->
<div class="logo-area">
  <img src="logo.svg" alt="">
</div>

Атрибут языка

Для элемента <html> в атрибуте lang должен указываться соответствующий язык документа. Это помогает инструментам синтеза речи определить, какое использовать произношение или системам перевода, какие использовать языковые правила.

<!DOCTYPE html>
<html lang="ru">
  <head>…</head>
  <body>…</body>
</html>

CSS

Синтаксис

После значения свойства обязательно ставится точка с запятой.
Для отступов внутри правил используются два пробела (либо таб, равный двум пробелам). Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
Единицы измерения не пишутся, там где в них нет необходимости. Например, border: 0.
Шестнадцатеричное значение цвета не сокращается, а пишется полностью из всех шести символов. Для записи используются строчные буквы. Например, #f5f5f5.
Названия тегов и свойств в правилах пишутся строчными буквами.
Начальный ноль для значений не сокращается (например, .5 вместо 0.5).
Во всех случаях в стилях используются двойные кавычки. В необязательных случаях кавычки не опускаются.
После двоеточия в правилах ставится один пробел (top: 10px;). А перед двоеточием пробел не нужен.
После запятых внутри значений rgb(), rgba(), hsl(), hsla() или rect() пробелы ставятся. Это повышает удобочитаемость.
До и после комбинатора между селекторами (например, p > a) ставится один пробел.
Каждое объявление в правиле пишется на новой строке.
Перед открывающейся фигурной скобкой ставится один пробел. После скобки запись идёт с новой строки:
```
.selector {
  color: #f5f5f5;
}
            
```
Закрывающая фигурная скобка пишется на новой строке и без отступа. Следующее после этого правило отделяется двумя пустыми строками.
При использовании препроцессоров правила, имеющие родителя, отделяются друг от друга одной пустой строкой.
При использовании препроцессоров не должно быть вложенных селекторов глубже 3-го уровня. Псевдоселекторы и @media не считаются увеличивающими уровень вложенности.


/* Хорошо */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 2px #cccccc, inset 0 1px 0 #ffffff;
}

/* Плохо */
.selector, .selector-secondary, .selector[type=text]{
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0,0,0,.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF}

/* CSS в препроцессорах */
.promo {
  display: block;

  &__link {         /* первый уровень вложенности */

    &:hover {       /* не увеличивает уровень вложенности */

      span {...}    /* второй уровень вложенности */
    }

    strong {...}    /* второй уровень вложенности */
  }

  @media (min-width: $screen-sm) {...} /* не увеличивает уровень вложенности */

}

Использование символа `&`

Амперсанд допустимо использовать перед:

разделителем БЭМ-элемента,
разделителем БЭМ-модификатора,
псевдоэлементом или псевдоселектором.


.promo {

  /* Хорошо: амперсанд перед псевдоклассом */
  &:hover { ... }

  /* Хорошо: амперсанд перед разделителем элемента */
  &__item {

    /* Плохо: амперсанд в месте разделения словосочетания */
    &-link { ... }

  }

  /* Плохо: амперсанд в месте разделения словосочетания */
  &-shover { ... }

  /* Хорошо: модификаторы написаны под элементами */
  &--large { ... }

}

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

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

Позиционирование
Блочная модель
Типографика
Оформление
Анимация
Разное

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

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

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

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

.declaration-order {
  /* Позиционирование */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  /* Блочная модель */
  display: block;
  float: right;
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;
  /* Типографика */
  font: normal 13px/1.5 "Arial", sans-serif;
  font-family: "Arial", sans-serif;
  font-size: 13px;
  font-style: normal;
  line-height: 1.5;
  color: #333333;
  text-align: center;
  /* Оформление */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  opacity: 1;
  /* Анимация */
  transition: color 1s;
  /* Разное */
  will-change: auto;
}

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

Имена классов пишутся строчными буквами (но не camelCase). Именование происходит согласно методологии БЭМ, Стиль Two Dashes.
Имена классов должны быть такими, чтобы по ним можно было быстро понять какому элементу страницы задан класс: избегайте сокращений (некоторые исключения:е — .btn для кнопок, .desc для описания), но не делайте их слишком длинными (более трёх слов).
Для написания классов используются английские слова и термины. Транслитом названия классов и атрибутов не пишутся.

/* Хорошо */
.menu { … }                 /* Имя блока */
.menu__button { … }         /* Имя элемента */
.menu__button--confirm { … }   /* Имя модификатора элемента */

/* Плохо */
.testElement { … }
.t { … }
.big_red_button { … }
.knopka { … }

Правило `@import`

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

<!-- Хорошо: подключение тегом link -->
<link rel="stylesheet" href="module.css">

<!-- Плохо -->
<style>
  @import url("module.css");
</style>

Варианты шрифта

Альтернативные варианты шрифта и тип семейства указываются в конце перечисления font-family.

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

Порядок шрифтов следующий:

нестандартный шрифт;
веб-безопасный;
тип шрифта.

Список веб-безопасных шрифтов можно посмотреть здесь — cssfontstack.com.

/* Хорошо: указан альтернативный веб-безопасный шрифт и его тип семейства */
body {
  font-family: "Helvetica", "Arial", sans-serif;
}

/* Кому-то нравится Arial, кому-то Tahoma */
body {
  font-family: "Helvetica", "Tahoma", sans-serif;
}

/* Плохо: указан только нестандартный шрифт */
body {
  font-family: "Helvetica";
}

/* Плохо: указан только нестандартный шрифт и тип семейства, альтернативный веб-безопасный шрифт отсутствует */
body {
  font-family: "Helvetica", sans-serif;
}

/* Плохо: Georgia — шрифт с засечками, а нестандартный шрифт — без засечек */
body {
  font-family: "Helvetica", "Georgia", sans-serif;
}

Стиль кода HTML/CSS

Оглавление

HTML

CSS

HTML

Синтаксис

Валидность

HTML-доктайп

Кодировка символов

Подключение стилей

Порядок атрибутов

Логические атрибуты

Подписи полей ввода

Размеры картинок

Атрибут языка

CSS

Синтаксис

Использование символа `&`

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

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

Правило `@import`

Варианты шрифта

Оглавление

HTML

CSS

HTML

Синтаксис

Валидность

HTML-доктайп

Кодировка символов

Подключение стилей

Порядок атрибутов

Логические атрибуты

Подписи полей ввода

Размеры картинок

Атрибут языка

CSS

Синтаксис

Использование символа &

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

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

Правило @import

Варианты шрифта

Использование символа `&`

Правило `@import`