8

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

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

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

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

2 回答 2

2

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

我们覆盖bemSelector()取自https://github.com/postcss/postcss-bem-linter/blob/master/lib/preset-patterns.js的函数

const modifier我们通过更改以匹配 https://en.bem.info/methodology/naming-convention/#two-dashes-style来使用两个破折号样式而不是默认 BEM

/**
 * @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
    }
  }
}
于 2018-11-12T15:44:56.657 回答
1

您可以使用 stylelint 的selector-class-pattern规则来强制使用正则表达式的类选择器的模式。

但是，如果您正在编写类似 BEM 的 CSS stylelint-selector-bem-pattern，那么包装PostCSS BEM Linter的 CSS会更强大，因为它理解组件、元素、修饰符和实用程序类的概念。

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

于 2017-06-12T15:28:31.447 回答