SCSS

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

Структура (для малых и средних проектов)

• scss

  • components - все части UI

  • _base.scss - свой сброс стилей

  • _functions.scss - функции

  • _includes.scss - все подключения (шрифты, либы и т.п.)

  • _mixins.scss - все миксины

  • _vars.scss - все переменные

  • app.scss - подключаем всё, файл для компиляции

Селекторы

В качестве селекторов мы используем только БЭМ классы. Все классы (блоки и продолжения элементов) именуем только в стиле kebab-case.

// плохо
#my-element {
  padding: 0;
}

// всё ешё плохо
.myElement {
  padding: 0;
}

// хорошо
.my-element {
  padding: 0;
}

// тоже хорошо
.navbar__item-link {
  padding: 0;
}

Теги мы используем только для глобального переопределения стилей.

Запрещено использовать в качестве селекторов идентификаторы (id). Исключением являются случаи, когда мы, например, кастомизируем какой-либо плагин, у которого нет классов, а есть только #megatimerCounter-478457, например так [id*="#megatimerCounter"] {}.

Селекторы с js-префикcом

Не используйте селектор с префиксом js-в целях стилизации. Эти селекторы предназначены для использования только с JavaScript, чтобы их можно было удалять или переименовывать без нарушения стиля.

Переменные

Прежде чем добавлять новую переменную для цвета или размера, убедитесь, что:

• Нет существующего

• Нет аналогичного, который мы могли бы использовать вместо него

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

Использование extend-правила запрещено из-за утечек памяти , и правило не работает должным образом для . Вместо этого используйте миксины:

// плохо
.pt-3 {
  padding-top: 12px;
}

.my-element {
  @extend .pt-3;
}

// компилируется в
.pt-3, .my-element {
  padding-top: 12px;
}

// хорошо
@mixin pt-3 {
  padding-top: 12px;
}

.my-element {
  @include pt-3;
}

// компилируется в
.my-element {
  padding-top: 12px;
}

Единицы измерения

px

Пиксели используем для ширины и высоты элементов (преимущественно блоков), а также для отступов

rem

rem используем для размера шрифтов (кроме body {}). Чтобы каждый раз не рассчитывать значение rem, используйте вспомогательную функцию rem(24px)

em

Мы не используем эту единицу измерения

%

Проценты используем для line-height, а также для адаптации элементов (ширина и высота элементов)

vh, wv

Используются для адаптации элементов под все разрешения экранов, когда адаптация должна складываться исходя из ширины или высоты экрана браузера

Linting

Раздел в разработке...