@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 and img 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.