scss-bem

Utility SCSS (sass) helpers to build strict BEM selectors.

Installation and usage

npm install --save-dev @bbt/bem

Usage in your stylesheets:

@use '@bbt/bem';

.my-block {
  // block styles

  @include element('my-element') {
    // element styles

    @include modifier('my-modifier') {
      // modifier styles
    }
  }

  @include modifier('my-block-modifier') {
    // block modifier styles

    @include element('my-element') {
      // block modifier element styles

      @include modifier('my-modifier') {
        // block modifier element modifier styles
      }
    }
  }
}

Produces CSS like:

.my-block {
  // block styles
}

.my-block .my-block__element {
  // element styles
}

.my-block .my-block__element.my-block__element--my-modifier {
  // modifier styles
}

.my-block.my-block--my-block-modifier {
  // block modifier styles
}

.my-block.my-block--my-block-modifier .my-block__my-element {
  // block modifier element styles
}

.my-block.my-block--my-block-modifier
.my-block__my-element.my-block__my-element--my-modifier {
  // block modifier element modifier styles
}