Skip to content

Latest commit

 

History

History
116 lines (75 loc) · 6.04 KB

codestyle-css.md

File metadata and controls

116 lines (75 loc) · 6.04 KB

Стандарты написания CSS

Общие принципы

  • Не используется глобальный сброс стилей для всей страницы.

  • !important

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

    .hidden {
  display: none !important;
}

Правила написания селекторов

Селекторы описываются только через классы, помимо прочего это позволяет минимизировать специфичность CSS-правил.

Не используются селекторы по id — должна быть возможность использовать блоки повторно.

Блок не должен зависеть от окружающих его блоков и сам не должен влиять на соседние блоки, поэтому:

  • Не используются селекторы по тэгу.

  • Не используются вложенные селекторы, кроме изменения стилей элемента в зависимости от модификатора, например:

    .form_green .input {
  border: 1px solid #00ff00;
}

Правила именования классов

  • Используются понятные и осмысленные имена классов.

  • Имена классов записываются с помощью цифр и латинских букв в нижнем регистре.

  • Для именования классов используется БЭМ. БЭМ - аббревиатура от трех слов Блок, Элемент и Модификатор.

    • Блок - логически и функционально независимый компонент страницы.

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

    • Модификатор - свойство блока или элемента, которое меняет их внешний вид, состояние или поведение.

    Элемент отделяется от блока двумя подчеркиваниями __. Модификатор двумя дефисами --.

    Для разделения слов в именах используется дефис -.

    Пример:

    • form — имя блока;

    • form__input — имя элемента блока;

    • form_green — имя модификатора блока.

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

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

  • Не должно быть пробелов в конце строк.

  • Шестнадцатеричное значение цвета не сокращается, а пишется полностью из всех шести символов. Для записи используются строчные буквы.

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

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

Свойства группируются в следующем порядке:

  1. Позиционирование;
  2. Блочная модель;
  3. Типографика;
  4. Оформление;
  5. Анимация;
  6. Разное.

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

Полный порядок свойств можно посмотреть тут.

Порядок селекторов и директив

  1. Псевдоэлементы;
  2. Псевдоклассы состояний;
  3. Структурные псевдоклассы;
  4. Псевдоклассы валидации;
  5. Псевдоклассы связанные с языком;
  6. Остальные псевдоклассы;
  7. Директивы.

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

Линтер

Для линтинга стилей используется конфигурация для stylelint.

Для проверки порядка свойств, селекторов и директив используется конфигурация для stylelint-order.