Stylelint/stylelint-scss能否强制重用选择器/类名组合，禁止独立定义？

一、基于Stylelint的自定义规则实现 #

Stylelint支持自定义规则，你可以编写专属规则来检测这类未复用已有嵌套结构的写法：

1. 遍历SCSS选择器，解析类名的BEM结构（拆分出block、element、modifier部分）
2. 检查当前文件中是否存在对应的嵌套父选择器（比如检测到.games-lib-table__info_filters时，确认是否已有.games-lib-table下嵌套的&__info）
3. 若存在对应嵌套结构但未被复用，直接抛出错误提示

你可以借助postcss-scss解析SCSS语法，配合Stylelint的规则API编写自定义规则，核心思路示例如下：

module.exports = {
  ruleName: 'scss/require-nested-bem-element',
  messages: {
    requireNested: '请在已有的&__{{element}}嵌套结构中定义{{fullClass}}，而非直接编写完整类名'
  },
  create: function(context) {
    return {
      Rule(node) {
        const selector = node.selector;
        const bemMatch = selector.match(/^(\.[a-z-]+)__([a-z-]+)_[a-z-]+$/);
        if (bemMatch) {
          const block = bemMatch[1];
          const element = bemMatch[2];
          const fullClass = selector;
          // 检查当前文件是否存在对应嵌套父选择器
          const hasNested = context.root.nodes.some(n => {
            return n.type === 'rule' && n.selector === block && n.nodes.some(child => {
              return child.type === 'rule' && child.selector === `&__${element}`;
            });
          });
          if (hasNested) {
            context.report({
              node,
              messageId: 'requireNested',
              data: { element, fullClass }
            });
          }
        }
      }
    };
  }
};

二、其他可选管控方式 #

除Stylelint生态外，还有以下工具/方式可以辅助规范：

• Prettier + Stylelint 配合：用Stylelint强制规则约束，再通过Prettier自动格式化嵌套结构，降低手动编写错误的概率
• Git钩子工具：使用husky或lint-staged在代码提交前自动执行规则检查，阻止不符合要求的代码入库
• BEM专属检查工具：bem-linter专门针对BEM命名规范做检查，可配置规则强制要求嵌套结构的使用，不过它更聚焦命名规范，需要调整配置适配你的场景

内容的提问来源于stack exchange，提问作者Alexander Nenashev