Styles

CSS, SASS, BEM

В качестве методологии написания стилей используется БЭМ.

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. Вложенность

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

// Плохо
.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