SASS BEM modifiers

bem_modifiers.md

Solution 1:

.block {

  &__element-1 {}

  &__element-2 {}

  &--modifier-1 &__element-1 {}

  &--modifier-1 &__element-2 {}

  &--modifier-2 &__element-1 {}

  &--modifier-2 &__element-2 {}

}

Advantages:

• There's no need to repeat neither the block name nor the modifier name. We're using &
• Unmodified and modified elements are at the same level of nesting. It improves readability.

Disadvantages

• We have to prepend each element with &--modifier-*. It's redundant.
• Modifiers are not wrapped in a bracket, so we're losing encapsulation of modifiers
• In case of many modifiers they are not separate one from another. It worsens readability.

Solution 2:

.block {

  &__element-1 {}

  &__element-2 {}

  &--modifier-1 {

    .block__element-1 {}

    .block__element-2 {}

  }

  &--modifier-2 {

    .block__element-1 {}

    .block__element-2 {}

  }

}

Advantages:

• Each modifier is wrapped in a bracket, so they're separated one from another. It improves readability.

Disadvantages

• We have to repeat the block name inside modifiers. We can't use & because & is a reference to .block .block--modifier-* not to .block--modifier-*

Solution 3:

.block {

  &__element-1 {}

  &__element-2 {}

}

.block--modifier-1 {

  &__element-1 {}

  &__element-2 {}

}

.block--modifier-2 {

  &__element-1 {}

  &__element-2 {}

}

Advantages

• Each modifier is wrapped in a bracket, so they're separated one from another.
• There's no need to repeat the modifier name. W're using &

Disadvantages

• We're losing encapsulation of "modules" because the block is not wrapped in a single bracket.

##Solution 4:##

$module: 'block';

.#{$module} {

  &__element-1 {  }

  &__element-2 {  }

  &--modifier-1 {

    .#{$module}__element-1 {  }

    .#{$module}__element-2 {  }

  }

  &--modifier-2 {

    .#{$module}__element-1 {  }

    .#{$module}__element-2 {  }

  }

}

Advantages

• Module is wrapped in a single bracket
• Modifiers are wrapped in a single bracket
• We don't need to repeat neither the block nor the modifier name

Disadvantages

• It requires a global $module variable.
• It doesn't look clean because of .#{$module} variable interpolation