/css-style-guide

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

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'у в именах классов.
  • Не используйте селекторы по ID.
  • Используя несколько селекторов в объявлении правила переносите каждый селектор на отдельную строку.