Stylelint hyphenated BEM config

Stylelint.io is flavour of the Sass-linting month (replacing scss-lint as the discerning bandwagon chaser's Sass linter of choice). Scss-lint caters to the Harry Roberts approved variant, calling it 'hyphenated BEM'. There is a BEM pattern plugin for Stylelint, but out of the box, it doesn't support this flavour.

In order to validate your hyphenated BEM selectors with Stylelint, add the BEM plugin – npm install stylelint-selector-bem-pattern – and add these regexes to the Stylelint plugin .stylelintrc config:

{
  "plugins": [
    "stylelint-selector-bem-pattern"
  ],
  "rules": {
    "plugin/selector-bem-pattern": {
      "componentName": "(([a-z0-9]+(?!-$)-?)+)",
      "componentSelectors": {
        "initial": "\\.{componentName}(((__|--)(([a-z0-9\\[\\]'=]+(?!-$)-?)+))+)?$"
      },
      "ignoreSelectors": [
        ".*\\.no-js.*",
        ".*\\.js-.*",
        ".*\\.lt-ie.*"
      ]
    }
  }
}

Then add //* @define component-name-here; weak to the top of each Sass partial and liberally pepper the file with // stylelint-disable plugin/selector-bem-pattern before any lines on which you don’t care that you’re not being BEMmy enough (you can start caring again with // stylelint-enable plugin/selector-bem-pattern below). The weak flag ensures that while initial selector sequences (before combinators) must match the defined convention, sequences after combinators don’t. This helps to keep things relatively sane, so you don’t have to reach for stylelint-disable too often.

The ignoreSelectors array included above is just what seemed to work well for me on one project – your mileage may vary, depending on what kind of utility classes make their way into your components.