# SCSS

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

* **scss**
  * **components** - все части UI
  * \_base.scss - свой сброс стилей
  * \_functions.scss - функции
  * \_includes.scss - все подключения (шрифты, либы и т.п.)
  * \_mixins.scss - все миксины
  * \_vars.scss - все переменные
  * app.scss - подключаем всё, файл для компиляции

## Селекторы

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

```scss
// плохо
#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`-правила запрещено из-за [утечек памяти](https://gitlab.com/gitlab-org/gitlab/-/issues/323021) , и правило [не работает должным образом](https://sass-lang.com/documentation/breaking-changes/extend-compound) для . Вместо этого используйте миксины:

```scss
// плохо
.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)`

### <mark style="color:red;">em</mark>

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

### %

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

### vh, wv

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

## Linting

<mark style="background-color:red;">Раздел в разработке...</mark>