Airbnb CSS / Sass руководство

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

Содержание

Терминология - Объявление правил - Селекторы - Свойства
CSS - Форматирование - Комментарии - OOCSS и BEM - ID селекторы - JavaScript хуки - Границы
Sass - Синтаксис - Порядок объявления - Переменные - Миксины - Использование extend - Вложенные селекторы
Перевод

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

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

“Правило” это сущность, которая состоит из селектора (или группы селекторов), с набором свойств внутри. Пример:

.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 в именах классов. Нижние подчеркивания тоже допустимы, если вы используете 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

Мы рекомендуем комбинировать подходы 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 селекторы

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

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

JavaScript хуки

Избегайте привязывания 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;
}

Sass

Синтаксис

Используйте .scss синтаксис, вместо оригинального .sass синтаксиса
Выстраивайте CSS правила и внешние подключения @include логически (подробности ниже)

Порядок объявления

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

Перечислите все свойства, которые не относятся к @include или вложенным селекторам
```
.btn-green {
  background: green;
  font-weight: bold;
  // ...
}
```
Объявление @include

Группировка @include-ов в конце делает правило более читаемым
```
.btn-green {
  background: green;
  font-weight: bold;
  @include transition(background 0.5s ease);
  // ...
}
```
Вложенные селекторы

Вложенные селекторы, если они необходимы, идут последними, после них ничего быть не должно. Добавляйте пустую строку между свойствами родительского селектора и вложенным селектором, так же как и между двумя вложенными селекторами. Применяйте такие же правила и для всего, что касается вложенных селекторов.
```
.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

Следует избегать директивы @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

whitesunset / css Goto Github PK

css's Introduction