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

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

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

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

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

.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⁠, а для устройства tablet⁠ — inline-block⁠. На лицо избыточность CSS-кода⁠. Элегантнее сделать так⁠:

.foo {
    …

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

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

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