Открыть меню    

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

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

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

HTML

  • Всегда указывается HTML5 доктайп <!DOCTYPE html>.
  • Не переусложняйте структуру HTML-кода, стремитесь к минимальному количеству элементов.
  • По возможности соблюдайте семантику тегов (списки в списках, таблицы в таблицах, заголовки в заголовках).
  • Не используйте <br> вместо CSS-отступов.
  • Не используйте <div> без атрибутов для вёрстки абзацев (создания блочного контекста) — используйте <p>.
  • Для каждого элементы формы необходим <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-блоку:

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

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

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

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

Добавить комментарий