# Стили

В качестве методологии написания стилей используется [БЭМ](https://ru.bem.info/methodology/quick-start/).

## 0. Введение

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

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

`.btn`

**Элемент** – составная часть блока. Не может использоваться вне него, при этом состояние блока может отражаться на состоянии его элементов.

`.btn__title`

**Модификатор** – применяется как для элемента, так и для блока. Позволяет изменять внешний вид, состояние или поведение.

Бывает двух видов:

1. Логический (да/нет):

   `.btn--active`
2. Ключ-значение:

   ```
    .btn--form_circle (форма: круг)
    .btn--form_triangle (форма: квадрат)

    .btn--state_error (состояние: ошибка)
   ```

Одновременно у одного элемента может быть только один ключ в одном из своих состояний. Кнопка не может быть круглой и квадратной одновременно.

**Пример:**

```
.slider 
     .slider__btn.slider__btn--pos_left
        .btn 
            .icon.icon--type_arrow-left

     .slider__content

     .slider__btn.slider__btn--pos_right
        .btn
            .icon.icon--type_arrow-right
```

У слайдера есть кнопки-переключатели слайдов и содержимое, которые предлежат только ему. 2 кнопки представляют собой место под блоки (компоненты) кнопок. Для каждой иконки определён модификатор-тип.

Как задавать в SCSS:

```
.slider {

    &__btn {

        &--pos_left {
            ...
        }

        &--pos_right {
            ...
        }
    }

    &__content {
        ...
    }
}
```

## 1. Файлы с исходным кодом

## 2. Использование возможностей языка/технологии

### 2.1. Переменные

Необходимо выносить `z-index` блока в переменные. Не нужно выносить в переменную значение `z-index`, если оно имеет смысл уже внутри конкретного блока и не влияет на отображение других блоков.

Переменные блоков, содержащие значение `z-index` должны размещать в одной группе переменных, которая должна быть осортирована в порядке убывания значения `z-index`.

Необходимо выносить в переменные названия цветов, размеров и называть семантически.

### 2.2. Вложенность

Для вложенных селекторов используется плоская запись.

```css
// Плохо
.attribute {

    &--is-editing {

        .attribute {

            &__input {
                display: block;
            }

            &__header {
                display: none;
            }
        }
    }
}

// Хорошо
.attribute {

    &--is-editing {

        .attribute__input {
            display: block;
        }

        .attribute__header {
            display: none;
        }
    }
}
```

### 2.3. Правила именования

#### 2.3.1. Модификаторы

**2.3.1.1. Синтаксис**

Задаётся как:

* Логический тип: `btn--<value>`

  *Пример:* `btn--active`
* Ключ-значение: `btn--<key>_<value>`

  *Пример:* `btn--state_normal`

**2.3.1.2. Модификаторы логического типа**

Стили, являющиеся логическими флагами, необходимо задавать без значения модификатора, т.е. само значение подразумевается как `true`.

```
// Плохо
icon--state_active

// Хорошо
icon--active
```