Руководство по оформлению css (sass) и html

Общие правила

Используйте 4 пробела для отступа. Не используйте табы и не мешайте табы и пробелы.
Используйте кодировку UTF-8 (без BOM).
Комментируйте неоднозначные места.
Комментарий пишется на отдельной строке, перед строкой, к которой он относится.
Пишите по возможности валидный код.

HTML

Всегда указывается HTML5 доктайп <!DOCTYPE html>.
Не переусложняйте структуру HTML-кода, стремитесь к минимальному количеству элементов.
По возможности соблюдайте семантику тегов (списки в списках, таблицы в таблицах, заголовки в заголовках).
Не используйте   вместо CSS-отступов.
Не используйте <div> без атрибутов для вёрстки абзацев (создания блочного контекста) — используйте .
Для каждого элементы формы необходим <label>.
Inline CSS и JS запрещены.
Пишите имена тегов и названия атрибутов в нижнем регистре.
Используйте двойные кавычки для значений атрибутов (кроме вставок json в data атрибуты).

Классы в HTML-коде

Если класс формируется динамически, указывайте комментарием все возможные значения:

HTML

<!-- class="vacancy_open vacancy_archived vacancy_anonymous" -->
<div class="vacancy vacancy_{{type}}">

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

Синтаксис названия классов

qname - блок
qname__qname - элемент
qname_qname - модификатор блока
qname__qname_qname - модификатор элемента блока
Не используйте сокращения.
Называйте классы по смыслу, а не по стилю.

где qname:

соответствует регулярному выражению ^[a-z]{2,}[a-z0-9]*(-[a-z0-9]+)*$;
содержит только латинские буквы в нижнем регистре, цифры и дефис;
не начинается с цифры;
не начинается и/или заканчивается минусом;
начинается с двух и более латинских букв.

// Да
.link-list {
    color: #000;
}

// Нет
.link-black {
    color: #000;
}

Форматирование CSS

CSS

.block-wrapper {
    border: 1px solid #fc0;
}

.block {
    color: #777;
}
@media (min-width: 1340px) {
    .block {
         color: #333;
    }
}

.block:hover,
.block:active {
    color: #000;
}

.block_modifier {
    transform: translateZ(90deg);
}

.block__element {
    background-image: url(background.png);
}
.block__element:before {
    content: '';
    font-size: 0;
}

.block__element_modifier {
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    font-size: 16px;
}

CSS-селекторы

Не используйте селекторы по #id.
Не используйте селекторы по имени тега (table {}), за исключением reset.css, базовых стилей для ссылок или стилей для user generated content.
Не используйте универсальный селектор *.

CSS-свойства

За префиксные свойста отвечает autoprefixer.
Не используйте !important.

Блок

Основная сущность — блок, блоками оформляются все независимые фрагменты страницы.

.block {}

Блок может включать в себя элементы.

Элемент

Элементы используются в случаях, когда фрагмент зависит от блока и не может существовать вне блока.

Определить использовать блок или элемент легко:

Присутствует-ли модификация фрагмента по модификатору блока .block_modifier .block__element? Если да, делаем элемент. Если нет, переходим к пункту 2.
Можно ли использовать фрагмент в отрыве от родителя? В большинстве случаях ответ «да», делаем блок. В редких случаях ответ «нет», делаем элемент.

Делаем элемент:

/*
<label class="radio">
    <input class="radio__input" type="radio">
    Подпись
</label>
*/
.radio {
    display: inline-block;
    position: relative;
    padding-left: 25px;
}
/* Без блока не имеет смысла */
.radio__input {
    position: absolute;
    left: 0;
    top: 0;
}

Делаем блок:

<div class="address">
    <!-- Без блока имеет смысл -->
    <div class="address-city">Москва</div>
    <div class="address-street">ул. Годовикова, д. 9, стр. 10</div>
</div>

В вёрстке класс-элемент и класс-блок не могут быть указаны на одном HTML-элементе.

Модификатор

Модификаторы служат для изменения состояния или изменения части свойств блока/элемента.

.block_modifier {}
.block__element_modifier {}

Псевдоклассы и селекторы по атрибуту приравниваются к модификаторам.

Модификатором блока можно модифицировать элемент, но нельзя модификатором элемента модифицировать другой элемент.

В вёрстке модификатор всегда должен быть указан рядом с его базовым блоком/элементом.

<!-- да -->
<span class="block block_modifier"></span>

<!-- нет -->
<span class="block_modifier"></span>

Дополнительные правила

Для каждого HTML-элемента в вёрстке указываются только CSS-классы относящиеся к одному CSS-блоку:
```





```
Не повышайте специфичность без крайней необходимости.
Каскад ограничен двумя(3-мя) классами .block_element .block__modifier {}. При этом вложенные элементы не должны и не могут быть использованы вне контекста основного блока-родителя.
Не миксуйте классы одного блока с классами другого блока .foo .bar {}.
Из некоторых правил есть исключения, они обсуждаются отдельно в каждом конкретном случае

Глобальные классы

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

Руководство по оформлению css (sass) и html

Общие правила

HTML

Классы в HTML-коде

HTML

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

Форматирование CSS

CSS

CSS-селекторы

CSS-свойства

Блок

Элемент

Модификатор

Дополнительные правила

Глобальные классы

Комментарии к статье