Airbnb CSS / Sass Советы по стилю кода

Наиболее разумный подход к CSS и Sass

Содержание

1. Терминология - Объявление правил - Селекторы - Свойства
2. CSS - Форматирование - Комментарии - Объектно-ориентированный CSS и БЭМ - ID Селектор - Хуки JavaScript - Границы
3. Sass - Синтаксис - Порядок объявления свойств - Переменные - Миксины - Наследование - Вложенные селекторы
4. Переводы

Терминология

Объявление правил

"Объявление правил" это имя данное селектору (или группе селекторов) с сопутствующими ему свойствами. Например:

.listing {
  font-size: 18px;
  line-height: 1.2;
}

Селекторы

В объявлении правил "селекторы" - это части, которые определяют, к какому элементу DOM дерева будут применены правила стилей. Селекторы могут соответствовать HTML элементу, а также классу элемента, ID или любому другому атрибуту этого элемента. Вот несколько примеров:

.my-element-class {
  /* ... */
}

[aria-hidden] {
  /* ... */
}

Свойства

И, наконец, свойства, которые придают выбранным элементам их стиль. Свойства объявляются в виде пары "ключ-значение", объявления правил могут содержать одно или несколько свойств. Объявление свойств может выглядеть так:

/* some selector */ {
  background: #f1f1f1;
  color: #333;
}

CSS

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

• Используйте 2 пробела для отступа.
• Предпочитайте подчеркивание CamelCase'у в именах классов.
  • Подчеркивания и PascalCasing допустимы, если вы используете БЭМ (смотри Объектно-ориентированный CSS и БЭМ далее)
• Не используйте селекторы по ID.
• Используя несколько селекторов в объявлении правила переносите каждый селектор на отдельную строку.