stylelint-config-syzygy-bem

SYZYGY stylelint config for BEM methodology

Stylelint BEM config build upon stylelint-selector-bem-pattern plugin.

Rules

• Two Dashes style naming scheme - block__element--modifier.
• One block (component) per one file.
• Block names consistent with filenames (minus extension 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 .block.-is-active).

You can accept this config as it is or just copy-paste the things you like from index.js.

Installation

Make sure you have stylelint installed:

npm install --save-dev stylelint

then install the config:

npm install --save-dev stylelint-config-syzygy-bem

Usage

Simply set your stylelint config to extend stylelint-config-syzygy-bem:

{
  "extends": "stylelint-config-syzygy-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. It rather should not be used standalone. You can extend multiple configs. We recommend to use stylelint-config-syzygy-bem with stylelint-config-syzygy-scss or any other config that fits your needs.

Example usage with stylelint-config-syzygy-scss:

{
  "extends": [
    "stylelint-config-syzygy-bem",
    "stylelint-config-syzygy-scss"
  ]
}

Changelog

License