Stylelint BEM Namics

Verifies that the given css/less/scss follows the following BEM code conventions.

Installation

npm install @namics/stylelint-bem --save-dev

Configuration

Simple configuration

{
  "plugins": [
    "@namics/stylelint-bem"
  ],
  "rules": {
    "plugin/stylelint-bem-namics": true
  }
}

Advanced configuration

You can define one or more namespaces which has to be prepended before every class name:

{
  "plugins": [
    "@namics/stylelint-bem"
  ],
  "rules": {
    "plugin/stylelint-bem-namics": {
      "namespaces": ["ux-"]
    }
  }
}

and in case of emergency you can overwrite the default prefixes

{
  "plugins": [
    "@namics/stylelint-bem"
  ],
  "rules": {
    "plugin/stylelint-bem-namics": {
      "patternPrefixes": [ "a", "m", "o", "t", "p" ],
      "helperPrefixes": [ "is", "has" ]
    }
  }
}

... or you can pass empty prefixes to disable prefixes completely

{
  "plugins": [
    "@namics/stylelint-bem"
  ],
  "rules": {
    "plugin/stylelint-bem-namics": {
      "patternPrefixes": [],
      "helperPrefixes": []
    }
  }
}

Valid examples

Default Pattern Prefixes

• a Atom
• m Molecule
• o Organism
• l Layout
• g Grid
• h Helper

Default Helper Prefixes

• state State

.a-[block-name] {}
.m-[block-name] {}
.o-[block-name] {}
.l-[block-name] {}
.g-[block-name] {}
.h-[block-name] {}

.a-[block-name]--[modifier-name] {}
.m-[block-name]--[modifier-name] {}
.o-[block-name]--[modifier-name] {}
.l-[block-name]--[modifier-name] {}
.g-[block-name]--[modifier-name] {}
.h-[block-name]--[modifier-name] {}

.a-[block-name]__[element-name] {}
.m-[block-name]__[element-name] {}
.o-[block-name]__[element-name] {}
.l-[block-name]__[element-name] {}
.g-[block-name]__[element-name] {}
.h-[block-name]__[element-name] {}

.a-[block-name]__[element-name]__[element-name] {}
.m-[block-name]__[element-name]__[element-name] {}
.o-[block-name]__[element-name]__[element-name] {}
.l-[block-name]__[element-name]__[element-name] {}
.g-[block-name]__[element-name]__[element-name] {}
.h-[block-name]__[element-name]__[element-name] {}

.state-a-[block-name]--[state-name] {}
.state-m-[block-name]--[state-name] {}
.state-o-[block-name]--[state-name] {}
.state-l-[block-name]--[state-name] {}
.state-g-[block-name]--[state-name] {}
.state-h-[block-name]--[state-name] {}

Exception

Whenever you will apply rules you will run into edge cases like third-party code or wysiwyg content where those rules have to be bent a little bit.

In this case you can get around the rules above but you should leave a comment why and enable the linting again:

/* wysiwyg does not follow bem */
/* stylelint-disable plugin/stylelint-bem-namics */
    .wysiwyg .headline {
        font-size: 34px;
    }
/* stylelint-enable plugin/stylelint-bem-namics */

Changelog

Please see the CHANGELOG.md