具有选择器 Bem 模式的无效组件选择器

Question

我遇到了 Stylelint 插件 stylelint-selector-bem-pattern 的问题。

我的 Stylelint 规则：

{
  "extends": [
    "stylelint-config-standard-scss"
  ],
  "plugins": [
    "stylelint-selector-bem-pattern"
  ],
  "rules": {
    "selector-class-pattern": null,
    "color-function-notation": "legacy",
    "alpha-value-notation": "number",
    "plugin/selector-bem-pattern": {
      "preset": "bem",
      "componentName": "[A-Z]+",
      "componentSelectors": {
        "initial": "^\\.{componentName}(?:-[a-z]+)?$",
        "combined": "^\\.combined-{componentName}-[a-z]+$"
      }
    }
  }
}

我的 SCSS 组件：

// @define TOTO

.toto_test {
  color: red;
}

.toto__test {
  color: blue;
}

Stylelint 错误：

Answer 1

您已选择 suit 预设，其 命名约定是：

• ComponentName
• ComponentName--modifierName
• ComponentName-descendentName
• ComponentName.is-stateOfComponent

如果你希望遵循 SuitCSS 命名约定，您应该编写：

/* @define Button */

.Button-loader {}

或者，您可以使用 < code>preset 选项来指定 bem 命名约定：

"plugin/selector-bem-pattern": {
  "preset": "bem"
}

您应该删除 componentName 和 componentSelectors 属性，因为它们会覆盖 “bem” 预设 使用自定义模式。

这将允许：

/* @define button */

.button__loader {}