@considonet/stylelint-config-bem
v1.0.1
Published
Default stylelint ruleset for BEM methodology stylesheets in ConsidoNet projects
Downloads
1,244
Readme
@considonet/stylelint-config-bem
Default
stylelint
ruleset for BEM methodology-based stylesheets in ConsidoNet projects.
Rules
This config is built upon stylelint-selector-bem-pattern
.
After some tweaks the following rules are applied:
- Two Dashes style naming scheme -
block__element--modifier
. - Optional (and recommended for Considonet projects) namespaced naming scheme supported -
c-block__element--modifier
- One block (component) per one file (except utilities)
- Block names consistent with filenames (minus extension, optional namespace and optional
_
filename prefix for Sass/SCSS). svg
andimg
can be styled by tag name.- No namespace modifiers are accepted for component state -
-is-
and-has
prefixed classnames (for example.c-block.-is-active
).
Installation
Using npm:
npm install --save-dev @considonet/stylelint-config-bem
or using yarn:
yarn add @considonet/stylelint-config-bem --dev
Usage
In your .stylelintrc.js file extend your config:
{
"extends": "@considonet/stylelint-config-bem"
}
Implicit components
By default all linted stylesheets are treated as implicit components. It means that component
names used for linting are based on the filenames. Although plugin config allows to narrow down
implicit components,
stylelint does not allow to merge nested options.
It means that to disable it for some files, stylelint-disable
comment is required. Example:
/* not-bem.css */
/* stylelint-disable plugin/selector-bem-pattern */
a {
color: inherit;
}
/* stylelint-enable plugin/selector-bem-pattern */
Usage with other configs
This config contains only rules for BEM and probably you don't want to use it standalone.
We recommend to use @considonet/stylelint-config-bem
with at least @considonet/stylelint-config-scss
or any other general ruleset.
See popular stylelint
configs for more inspirations.
Example usage with other our packages:
{
"extends": [
"@considonet/stylelint-config-bem",
"@considonet/stylelint-config-scss",
"@considonet/stylelint-config-order"
]
}
You can also use our default preset which includes this configuration - @considonet/stylelint-config-default
.