如何检查stylelint选择器最大数量及单文件根类唯一性？

1. 如何检查stylelint中允许的选择器最大数量？ #

如果你想限制CSS文件中单个规则块的选择器数量（比如逗号分隔的多个选择器），直接用stylelint内置的max-selectors规则就可以搞定。

你只需要在你的stylelint配置文件（比如.stylelintrc或者stylelint.config.js）里启用这个规则，并设置你想要的最大数量：

{
  "rules": {
    "max-selectors": 3
  }
}

举个例子，要是某个规则块里写了4个选择器，就会触发stylelint的错误提示：

/* 这个会报错，因为选择器数量超过了设置的3个 */
.header, .nav, .sidebar, .footer {
  margin: 0;
}

如果你的需求是限制整个文件的选择器总数，那stylelint没有内置的规则直接支持，这时候就得自己写个自定义规则来实现了。

2. 是否可配置stylelint，使其校验单个文件中仅存在一个根类？ #

stylelint本身没有内置的规则直接做这个校验，但完全可以通过自定义规则来实现，而且这是最精准的方式。

自定义规则实现思路 #

你可以写一个简单的自定义规则，遍历文件里的所有顶级规则（也就是没有父选择器的规则），统计其中类选择器的数量，一旦超过1个就抛出错误。

给你一个核心逻辑的示例（可以直接扩展成完整的自定义规则）：

module.exports = function (options) {
  return {
    ruleName: 'single-root-class',
    messages: {
      expected: '文件里只能有一个根类选择器哦'
    },
    create: function (context) {
      let rootClassCount = 0;
      return {
        Rule(node) {
          // 筛选出顶级的类选择器规则
          if (node.parent.type === 'root' && node.selectors.some(sel => sel.startsWith('.'))) {
            rootClassCount++;
            if (rootClassCount > 1) {
              context.report({
                node,
                message: context.messages.expected
              });
            }
          }
        }
      };
    }
  };
};

把这个规则加到你的stylelint配置里后，就能实现你要的效果：比如文件里同时写了.a {}和.b {}就会报错，只有一个根类时才能通过校验。

要是你不想写自定义规则，也可以尝试组合现有规则做近似限制，但这种方式没法精准区分根类和嵌套类，所以还是自定义规则靠谱。

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