Stylelint BEM Namics

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

!screenshot

Installation

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

Configuration

$3


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

$3

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

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

and in case of emergency you can overwrite the default prefixes

`js
{
"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

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

Valid examples

$3

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

$3

* state State

`css
.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:

`css
/ 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