Наиболее разумный подход к 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;
}

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

Плохо

.avatar{
    border-radius:50%;
    border:2px solid white; }
.no, .nope, .not_good {
    // ...
}
#lol-no {
  // ...
}

Хорошо

.avatar {
  border-radius: 50%;
  border: 2px solid white;
}

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

• Предпочитайте однострочные (//) комментарии многострочным.
• Рекомендуется писать комментарии в отдельные строки. Старайтесь избегать комментариев в конце строки.
• Пишите детальные комментарии для неочевидного кода:
  • Использование z-index
  • Совместимость с браузерами или CSS-хаки

Мы рекомендуем комбинировать Объектно-ориентированный CSS и БЭМ по следующим причинам:

• Это помогает создать чистую, строгую связь между CSS и HTML.
• Помогает создавать многоразовые, составные компоненты.
• Меньше вложенностей, низкая специфичность правил.
• Способствует созданию масштабируемых таблиц стилей.

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

• Nicole Sullivan OOCSS вики
• Smashing Magazine Введение в Объектно-ориентированный CSS

БЭМ, или "Блок-Элемент-Модификатор" - это соглашение об именовании классов в HTML и CSS. Разработано Яндексом с прицелом на большие объёмы кода и масштабируемость. Может послужить как солидный набор правил для использования OOCSS.

• CSS Trick's БЭМ 101
• Harry Roberts Введение в БЭМ

Мы рекомендуем вариант БЭМ, в котором используются PascalCased "блоки", отлично работающие в связке с компонентами (например React). Подчеркивания и тире по-прежнему используются для модификаторов и элементов. Примеры

// ListingCard.jsx
function ListingCard() {
  return (
    <article class="ListingCard ListingCard--featured">

      <h1 class="ListingCard__title">Adorable 2BR in the sunny Mission</h1>

      <div class="ListingCard__content">
        <p>Vestibulum id ligula porta felis euismod semper.</p>
      </div>

    </article>
  );
}

/* ListingCard.css */
.ListingCard { }
.ListingCard--featured { }
.ListingCard__title { }
.ListingCard__content { }

• .ListingCard является "блоком" и представляет родительский компонент
• .ListingCard__title является "элементом" и представляет дочерний компонент .ListingCard, который позволяет составить блок в целом.
• .ListingCard--featured является "модификатором" и представляет разные состояния .ListingCard.

Возможность выбирать элементы по ID в CSS является, как правило, плохой практикой. ID селекторы предоставляют неоправданно высокий уровень специфичности и невозможность многоразового использования. Более подробная информация по этому вопросу: Статья CSS Wizardry

Избегайте использования одинаковых имён классов в CSS и JavaScript. Использование одинаковых имён классов может привести, как минимум, к потере времени при рефакторинге, и как максимум к боязни разработчика сломать функционал вводом изменений.

Мы рекомендуем создавать отдельные имена классов для JavaScript используя префикс .js-:

<button class="btn btn-primary js-request-to-book">Request to Book</button>

Для обозначения отсутствия границы используйте 0 вместо none.

Плохо

.foo {
  border: none;
}

Хорошо

.foo {
  border: 0;
}

• Всегда используйте .scss синтаксис, и никогда оригинальный .sass синтаксис.
• Упорядочивайте обычный CSS и @include-объявления логически.

1. Объявления свойств

   Перечислите все стандартные объявления свойств - всё, что не является @include-объявлением или вложенным селектором.

   .btn-green {
     background: green;
     font-weight: bold;
     // ...
   }

2. @include-объявления

   Группирование @include-объявлений в конце правила делает код более читаемым.

   .btn-green {
     background: green;
     font-weight: bold;
     @include transition(background 0.5s ease);
     // ...
   }

3. Вложенные селекторы

   Вложенные селекторы, если необходимо, идут последними, и ничего не должно идти после них. Добавьте пробел между объявлением правила и вложенным селектором, а также между смежными вложенными селекторами. Применяйте эти принципы к вашим вложенным селекторам.

   .btn {
     background: green;
     font-weight: bold;
     @include transition(background 0.5s ease);
   
     .icon {
       margin-right: 10px;
     }
   }

Отдавайте предпочтение именам переменных разделенных тире (например $my-variable). Допускается использование подчеркивания в виде префикса для имён, которые будут использоваться в пределах одного файла (например $_my-variable).

Миксины должны использоваться для поддержания чистоты и ясности кода или абстрактной сложности во многом так же, как и хорошо названные функции. Миксины, не принимающие никаких аргументов, могут быть полезны для этого. Но нужно иметь в виду, что если вы не сжимаете свои файлы (например gzip), то это может привести к лишнему повторению кода.

Использование @extend необходимо избегать из-за его неинтуитивности и потенциальной опасности в поведении, особенно при использовании вместе со вложенными селекторами. Даже наследование селекторов верхнего уровня может создать проблемы, если в будущем будет изменён порядок селекторов. Сжатие компенсирует экономию, которую вы получили бы с помощью наследования.

Вложенные селекторы не должны быть глубже трёх вложений

.page-container {
  .content {
    .profile {
      // STOP!
    }
  }
}

Когда селекторы становятся слишком длинными (например как в примере показанном выше), скорее всего вы пишете CSS, который:

• Слишком сильно привязан к HTML (хрупкий)
• Слишком специфичен
• Не многоразовый

И вновь: никогда не используйте селекторы по ID! Если вы вынуждены использовать селекторы по ID (вы действительно должны постараться этого не делать), они никогда не должны быть вложенными. Если вы обнаружили это в своём коде - пересмотрите разметку или выясните, зачем нужна такая сильная специфика. Если у вас правильно написанны HTML и CSS, вам никогда не придётся делать этого.

Этот гид по стилю также доступен на других языках:

• English: Airbnb CSS /css
• Chinese (Simplified): Zhangjd/css-style-guide