Соглашение по написанию стилей

css-styleguide-lj.md

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

• Используем отступ в 2 пробела
• В названиях классов не используем camelCase
• Не используем в селекторах атрибуты ID, кроме крайней необходимости
• При использовании нескольких селекторов каждый переносится на следующую строку
• Перед открывающей скобкой { ставим пробел
• В правилах ставим пробел после двоеточия :, до двоеточия пробелов нет
• Закрывающую скобку } ставим на новой строке, отбиваем пробелами на один уровень с правилами

Как не надо

.avatar{
    z-index: 100;
    border:2px solid white;
    top: 0;
    position: absolute; 
    border-radius:50%;
    content: '';}
.no, .nope, .not_good {
  ...
}
#lol-no {
  ...
}

Как надо

.avatar {
    content: '';
    position: absolute;
    top: 0;
    z-index: 100;
    border: 2px solid white;
    border-radius: 50%;
    }

.one,
.selector,
.per-line {
    ...
    }

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

.declaration-order {
  /* Содержимое */
  content: '';

  /* Позиционирование */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  
  /* Модель содержимого и раскладка */
  display: block;
  display: flex;
  flex-direction: ...;
  align-items: ...;

  /* Блочная модель */
  float: right;
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;

  /* Оформление */
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  background-color: #f5f5f5;
  opacity: 1;

  /* Типографика */
  font: normal 13px/1.5 "Arial", sans-serif;
  font-size: 13px;
  font-family: "Arial", sans-serif;
  font-style: normal;
  line-height: 1.5;
  text-align: center;
  color: #333333;

  /* Анимация */
  transition: color 1s;

  /* Разное */
  will-change: auto;
}

Комментарии

• Используем многострочные комментарии /* ... */
• Предпочитаем использовать комментарии на отдельной строке, а не в конце строки

Большие значимые блоки (перед комментарием 3 переноса строки)

/* SVG Preloader
----------------------------------- */
.svgpreloader {
    }

Названия небольших отдельных блоков

/* svg tag and single tag */
.svgpreloader-svg,
.svgpreloader-tag {
    ...
    }

/* pseudo-element */
.svgpreloader-pseudo:after {
    ...
    }

Именование

Используем соглашение об именовании БЭМ (Блок-Элемент-Модификатор) для классов HTML и CSS.

Пример

<article class="listing-card listing-card--featured">

  <h1 class="listing-card__title">Заголовок</h1>

  <div class="listing-card__content">
    <p>Содержимое</p>
  </div>

</article>

.listing-card { }
.listing-card--featured { }
.listing-card__title { }
.listing-card__content { }

• .listing-card это "блок", он на верхнем уровне
• .listing-card__title это "элемент" и потомок .listing-card, который позволяет представить блок как целое
• .listing-card--featured это "модификатор", он представляет отдельный вид или вариацию блока .listing-card

Специфичность

• Не используйте атрибут ID в селекторах
• Не используйте без необходимости вложенность. Если можно сделать .header-nav {} вместо .header .header-nav {} — сделайте
• Не используйте наименование тега в селекторах. .nav {} лучше чем ul.nav {}
• Если вам надо сделать новый селектор более специфичным, чем существующий, не используйте !important. Для увеличения специфичности добавляйте родительские теги

Взаимодействие с JavaScript

Старайтесь избегать использования одних и тех же классов в CSS и JavaScript. Если в js-файлах опираться на те же классы, что и в css, то после изменения или рефакторинга html и css фукционал в скриптах может перестать работать. На исправление этого будет уходить много времени.

Для js-классов используйте префикс .js-:

<button class="btn js-add-comment">Добавить комментарий</button>

<div class="items js-bg-color">...</div>