Открыть меню    

Руководство по оформлению 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>
  • Не повышайте специфичность без крайней необходимости.
  • Каскад ограничен двумя классами .block_element .block__modifier {}.
  • Не миксуйте классы одного блока с классами другого блока .foo .bar {}.
  • Из некоторых правил есть исключения, они обсуждаются отдельно в каждом конкретном случае

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

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

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

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

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