На главную

О модификаторах

.foo {
    display: block;

    &.foo_modificator {
        display: inline-block;
        }
    }

Модификатор (в БЭМ) — некая сущность, которая может влиять на внешний вид, состояние и поведение блока/элемента. А какие бывают модификаторы?

Публикация от .

Прямая модификация

Непосредственная модификация элемента/блока. Самый простой и очевидный способ модификации.

.foo {
    display: block;

    &.foo_modificator {
        display: inline-block;
        }
    }

Модификация по состоянию

Используем часто. Осознаём реже.

.foo {
    display: block;

    &[open] {
        display: inline-block;
        }

    //    &:hover { … }
    }

Модификация по родительскому и сестринским элементам

Используем. Обычный, привычный нам каскад и сестринские селекторы.

.foo {
    display: block;

    .bar & {
        display: inline-block;
        }

    //    .bar > & { … }
    //    .bar + & { … }
    //    .bar ~ & { … }
    }

Скомбинируем с предыдущим вариантом.

.foo {
    display: block;

    .bar:hover & {
        display: inline-block;
        }
    }

Модификация по разделу/странице сайта

Ранее, для модификации элементов на определенных страницах или разделах сайта, я использовал модификацию по родителю, например так:

.foo {
    display: block;

    .pg-portfolio & {
        display: inline-block;
        }
    }

У данного способа есть недостаток — без дополнительной обработки, стили попадают в общий файл. То есть, стили будут подгружаться на все страницы, в том числе на те, на которых эти стили не нужны.

Учитывая данный момент, в моих стилях есть переменные $section и $page, в зависимости от которых можно модифицировать стили выбранного элемента.

.foo {
    display: block;

    @if $section == 'portfolio' {
        display: inline-block;
        }
    }

Дабы привести код к привычному виду, используем миксин.

.foo {
    display: block;

    @include section(portfolio) {
        display: inline-block;
        }
    }

Модификация по устройству

Аналогично предыдущему примеру

.foo {
    display: block;

    @include device(tablet) {
        display: inline-block;
        }
    }

Дополняторы

Старайтесь, чтобы ваши модификаторы были не модификаторами, а дополняторами. Обратите внимание на пример ниже:

.foo {
    display: block;

    @include device(tablet) {
        display: inline-block;
        }
    }

В данном примере значение свойства display у элемента .foo установлено в block, а для устройства tabletinline-block. На лицо избыточность CSS-кода. Элегантнее сделать так:

.foo {
    …

    @include device(tv, desktop) {
        display: block;
        }

    @include device(tablet, phone) {
        display: inline-block;
        }
    }

В данном примере мы не модифицируем стили, а дополняем их.