Git Product home page Git Product logo

airbnb-css-ru's Introduction

Airbnb CSS / Sass Styleguide

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

Навигация

  1. Терминология
  2. CSS
  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 пробела) для отступов
  • Kebab-case предпочтительнее camelCase в названии классов.
    • Snake_case и PascalCase можно использовать при работе с 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 {
  // ...
}

Комментарии

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

OOCSS и BEM

Мы поощеряем некоторые комбинации OOCSS и BEM, вот почему:

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

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

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

Мы рекомендуем вариант БЭМ, в котором используются 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, это является плохой практикой. Селекторы ID вводят излишне высокий уровень специфичности для ваших правил, и лишает возможности их реиспользовать.

Более подробная статья на эту тему - CSS Wizardry's article

JavaScript хуки

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

Мы рекомендуем использовать префикс .js-, для тех элементов которые будут задействованы в Javascript:

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

Свойство Border

Вместо none используйте 0 для свойства border:

Плохо

.foo {
  border: none;
}

Хорошо

.foo {
  border: 0;
}

⬆ К навигации

Sass

Синтаксис

  • Используйте синтаксис .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;
      }
    }

Переменные

Предпочитайте kebab-case именование переменных (напр. $my-variable) camelCase или snake_cased именованию. Допускается использовать знак нижнего подчеркивания для обозначения переменной используемой в пределах одного файла (напр. $_my-variable).

Миксины

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

Директива @extend

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

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

Вложенность селекторов не должна быть больше 3!

.page-container {
  .content {
    .profile {
      // Стоп!
    }
  }
}

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

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

Еще раз: никаких вложенных ID селекторов!

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

⬆ К навигации

Лицензия

(The MIT License)

Copyright (c) 2015 Airbnb

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

⬆ К навигации

airbnb-css-ru's People

Contributors

lencioni avatar ljharb avatar backwardok avatar nekorsis avatar andrewjrhill avatar antoniofull avatar felipevolpatto avatar ismamz avatar mat-u avatar mikefowler avatar rtplv avatar victorlss avatar trungvose avatar zhangjd avatar arvinh avatar nao215 avatar

Watchers

James Cloos avatar Aleksander avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.