stylelint-config-two-dash-bem

BEM Convention zero dependency rule enforcing Two Dashes style for Stylelint.

Why

I was looking for a Two Dashes style BEM rule for Stylelint and couldn't find one. There are great options like stylelint-selector-bem-pattern but that one is a more broad solution and I wanted to make it as simple as possible for my needs.

If you use Two Dashes style BEM in your project and you want just the rule, nothing else, this is the what you need.

Installation

npm install stylelint-config-two-dash-bem --save-dev

Usage

Add the following to your .stylelintrc file:

{
  "extends": ["stylelint-config-two-dash-bem"]
}

Example

/* Good */

.block {}
.block__element {}
.block--modifier {}
.block__element--modifier {}
.block__elem-name--mod-name--mod-val {}

.block {
  &__element {
    &--modifier {
    }
  }
}

/* Error */

.block_element {}

.main {
  &_content {}

  &-content {}
}