如何使用 stylelint 对 Harry Robert 的 BEM 约定进行 lint？

Question

PostCSS BEM Linter插件需要为每个块进行组件定义，这在遗留项目中是一件耗时的事情。

有没有办法使用 stylelint 检查类模式并在项目的所有样式表（在我的例子中为 .scss）中显示错误，而不需要在每个文件/块中定义组件？

https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

.block {}
.block__element {}
.block--modifier {}

Answer 1

我有一个来自 @jeddy3 答案的工作示例。
这是我的副本

stylelint.config.js

我们重写了

bemSelector()

函数，取自https://github.com/postcss/postcss-bem-linter/blob/master/lib/preset-patterns.js

我们通过更改

const modifier

来匹配，使用两个破折号样式而不是默认的 BEM https://en.bem.info/methodology/naming-convention/#two-dashes-style

/**
 * @param {String} block
 * @param {Object} [presetOptions]
 * @param {String} [presetOptions.namespace]
 * @returns {RegExp}
 */
const bemSelector = (block, presetOptions) => {
  const ns = (presetOptions && presetOptions.namespace) ? `${presetOptions.namespace}-` : '';
  const WORD = '[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*';
  const element = `(?:__${WORD})?`;
  const modifier = `(?:--${WORD}){0,2}`;
  const attribute = '(?:\\[.+\\])?';
  return new RegExp(`^\\.${ns}${block}${element}${modifier}${attribute}$`);
}

module.exports = {
  extends: 'stylelint-config-recommended-scss',
  plugins: [
    'stylelint-selector-bem-pattern'
  ],
  rules: {
    'plugin/selector-bem-pattern': {
      preset: 'bem',
      componentSelectors: bemSelector
    }
  }
}

Answer 2

您可以使用 stylelint 的

selector-class-pattern

规则来使用正则表达式强制类选择器的模式。

但是，如果您正在编写类似 BEM 的 CSS，那么包装 PostCSS BEM Linter

 的 

stylelint-selector-bem-pattern 会更强大，因为它理解组件、元素、修饰符和实用程序类的概念。

有一个选项可以根据文件名隐式定义组件，从而无需在每个文件中定义组件。

Answer 3

如果您的项目使用两个破折号 bem，即

block__element--modifier

，您可以安装这个仅具有该规则而没有其他规则的零依赖模块 

https://www.npmjs.com/package/stylelint-two-dash-bem-规则