09_styles.md

Работа со стилями

При работе со стилями важно придерживаться установленных правил по оформлению кода.

В сборке используется препроцессор SCSS и PostCSS-плагин Autoprefixer.

Стили размещаются в папке src/scss:

ninelines-template
└── src
    └── scss
        ├── functions
        │   ├── _responsive.scss
        │   └── _sprites.scss
        ├── mixins
        │   ├── _breakpoint.scss
        │   ├── _clearfix.scss
        │   ├── _retina.scss
        │   ├── _sprites.scss
        │   ├── _triangle.scss
        │   └── _visually-hidden.scss
        ├── vendor
        │   └── .keep
        ├── _base.scss
        ├── _fonts.scss
        ├── _functions.scss
        ├── _mixins.scss
        ├── _sprites.hbs
        ├── _sprites.scss
        ├── _variables.scss
        ├── _vendor.scss
        └── main.scss

За сборку и преобразование SCSS в CSS отвечает задача scss:

gulp scss

После выполнения команды в папке build/css появятся файлы main.css и main.css.map:

ninelines-template
└── build
    └── css
        ├── main.css
        └── main.css.map

Правила написания кода

БЭМ

Для именования классов рекомендуется использовать БЭМ-нотацию.

.block {
    &__element {
        &--modificator {
            // ...
        }
    }
}

Классы состояний

Классы состояний рекомендуется записывать кратко:

.is-active {
    // ...
}

.is-current {
    // ...
}

.is-open {
    // ...
}

.is-hidden {
    // ...
}

Порядок CSS-свойств

CSS-свойства следует записывать в определенном порядке. Порядок задан в файле .stylelintrc (ключ order/properties-order). Проверить правильность порядка свойств можно с помощью линтера:

gulp lint:scss

Переменные

В файл src/scss/_variables.scss следует выносить лишь основные переменные:

• font-family для шрифтов. Пример:

  $font-family-roboto: Roboto, sans-serif;
  $font-family-pt-serif: PT Serif, serif;

• Цвета. Пример:

  $color-aqua-deep: #005741;
  $color-black: #000;
  $color-white: #fff;

  Для именования цветов можно пользоваться данным сервисом.

Переменные, используемые лишь в одном блоке или компоненте следует записывать в том же файле, где они используются.

@mixin и @extend

Повторяющиеся участки кода (20-30 строк и более), отличающиеся лишь значениями, следует выносить в отдельные миксины.

Не рекомендуется использовать директиву @extend. Вместо неё следует воспользоваться @mixin.

Вендорные префиксы

В SCSS-коде не должно присутствовать вендорных префиксов. Они автоматически расставляются в процессе сборки. Однако существуют исключения и некоторые префиксы необходимо добавлять вручную.

Неправильно:

input {
    -webkit-transition: border-color 0.3s;
    transition: border-color 0.3s;

    &::-webkit-input-placeholder {
        color: #000;
    }

    &:-moz-placeholder {
        color: #000;
    }

    &::-moz-placeholder {
        color: #000;
    }

    &:-ms-input-placeholder {
        color: #000;
    }

    &::placeholder {
        color: #000;
    }
}

Правильно:

input {
    transition: border-color 0.3s;

    &::placeholder {
        color: #000;
    }
}

Использование линтера

В сборку интегрирован линтер stylelint. Файл настроек — .stylelintrc. Данный линтер позволяет поддерживать SCSS-код в соответствии с заданным регламентом.

Проверка осуществляется с помощью задачи lint:scss:

gulp lint:scss

Пример использования:

.block {
  &__element {
    display: inline-block
  }
  border-radius: 0px;
  height: 30px;
  width:30px;
}

Результаты проверки:

2:3     ⚠  Expected indentation of 1 tab (indentation) [stylelint]
3:5     ⚠  Expected indentation of 2 tabs (indentation) [stylelint]
3:25    ⚠  Expected a trailing semicolon (declaration-block-trailing-semicolon) [stylelint]
4:3     ⚠  Expected indentation of 1 tab (indentation) [stylelint]
5:3     ⚠  Expected indentation of 1 tab (indentation) [stylelint]
5:3     ⚠  Expected declaration to come before rule (order/order) [stylelint]
5:3     ⚠  Expected empty line before declaration (declaration-empty-line-before) [stylelint]
5:19    ⚠  Unexpected unit (length-zero-no-unit) [stylelint]
6:3     ⚠  Expected indentation of 1 tab (indentation) [stylelint]
7:3     ⚠  Expected indentation of 1 tab (indentation) [stylelint]
7:3     ⚠  Expected "width" to come before "height" (order/properties-order) [stylelint]
7:9     ⚠  Expected single space after ":" with a single-line declaration (declaration-colon-space-after) [stylelint]

Исправленный код:

.block {
    border-radius: 0;
    width:30px;
    height: 30px;

    &__element {
        display: inline-block
    }
}