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

1. Терминология - Объявление правил - Селекторы - Свойства
2. CSS - Форматирование - Комментарии - OOCSS и BEM - ID селекторы - JavaScript хуки - Границы
3. Sass - Синтаксис - Порядок объявления - Переменные - Миксины - Использование extend - Вложенные селекторы
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 в именах классов. Нижние подчеркивания тоже допустимы, если вы используете BEM (смотрите OOCSS и BEM ниже);
• Не используйте 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;
  • Описывайте совместимость или какой-то специфический хак для конкретного браузера.

Мы рекомендуем комбинировать подходы OOCSS и BEM по следующим причинам:

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

OOCSS, или “Объктно Ориентированный CSS”, это подход, который позволяет писать CSS, который в свою очередь побуждает вас думать о ваших стилях как о коллекции “объектов”: многократно используемых, повторяющихся кирпичиках, которые могут быть использованы независимо друг от друга на всем сайте.

• Nicole Sullivan's OOCSS Вики
• Smashing Magazine's Введение в OOCSS

BEM, или “Блок-Элемент-Модификатор”, это соглашении о именовании классов в HTML и CSS. Подход, созданный компанией Яндекс, имеет большой запас масштабируемости и его можно применять как набор правил для осуществления принципов OOCSS.

• CSS трюки BEM 101
• Harry Roberts' Введение в BEM

Пример

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

  <h1 class="listing-card__title">Adorable 2BR in the sunny Mission</h1>

  <div class="listing-card__content">
    <p>Vestibulum id ligula porta felis euismod semper.</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 в CSS, относитесь к этому как к анти-паттерну. ID селекторы добавляют излишне высокий приоритет в вычислении очередности применения ваших правил и они к тому же не являются повторно используемыми.

Если вам интересно узнать, как правильно работать с приоритетами применения правил, прочтите статью CSS Wizardry.

Избегайте привязывания CSS правил и JavaScript обработчиков на один класс. Игнорирование этого правила приводит как минимум к бесполезному рефакторингу, когда разработчик вынужден изменять все классы в CSS селекторах после того, как он изменил класс в JS обработчике. В худшем случае, разработчики будут вообще бояться изменить что-либо из-за страха сломать верстку.

Мы рекомендуем добавлять специфические префиксы к классам для привязывания JS-обработчиков, например .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), вместо CamelCase или snake_case. Допускается добавлять нижнее подчеркивание в качестве префикса для переменных, которые используются в пределах одного файла (например $_my-variable).

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

Следует избегать директивы @extend, потому что она имеет не интуитивное и потенциально опасное поведение, особенно при использовании совместно с вложенными селекторами. Даже расширение селекторов высшего уровня может принести проблемы, если порядок селекторов изменяется позже (например если они в другом файле и порядок подключения файлов вдруг изменился). Использование gzip позволяет получить большинство преимуществ, которые дает использование @extend, а сделать код более читаемым и чистым помогают миксины.

Не вкладывайте селекторы более чем на три уровня!

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

Когда селекторы достигают этой глубины, вы, скорее всего, пишете CSS, который:

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

Еще раз: никогда не используйте ID селекторы!

Если вам необходимо использовать ID селекторы, в первую очередь (уж постарайтесь), они не должны быть вложенными. Если вы обнаружили себя за использованием ID селекторов, вам надо переосмыслить вашу HTML разметку или подумать, зачем вам нужен такой мощный приоритет в вычислении очередности применения селекторов. Если вы пишете правильный HTML и CSS, вам никогда не придется их использовать.

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

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