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

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

.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;
    }
}

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