在CSS文件中计算选择器数量

Question

是否有现有的插件/应用程序/程序/脚本或其他任何东西，可以分析和计算文件中的CSS选择器数量？我想检查我的CSS文件在IE中无法工作的原因是因为我的选择器数量超过了4095（我很确定不是这个原因）

谢谢！

p.s. 如果有一个haml/sass/compass解决方案，则会额外加分。

- corroded

---

选择器的数量是否成为问题了吗？如果不是，那是什么问题呢？我也遇到了同样的问题。突然间，只有IE9无法正确显示我的网站... - 9ete

Answer 1

以下代码片段可在Firefox的Firebug控制台中运行，用于计算CSS选择器（而不仅是CSS规则）的总数，并检查它是否达到每个样式表的4095个选择器限制：

var
  styleSheets = document.styleSheets,
  totalStyleSheets = styleSheets.length;

for (var j = 0; j < totalStyleSheets; j++){
  var
    styleSheet = styleSheets[j],
    rules = styleSheet.cssRules,
    totalRulesInStylesheet = rules.length,
    totalSelectorsInStylesheet = 0;

  for (var i = 0; i < totalRulesInStylesheet; i++) {
    if (rules[i].selectorText){
      totalSelectorsInStylesheet += rules[i].selectorText.split(',').length;
    }
  }
  console.log("Stylesheet: "+styleSheet.href);
  console.log("Total rules: "+totalRulesInStylesheet);
  console.log("Total selectors: "+totalSelectorsInStylesheet);
}

- jetli13

---

感谢您发布答案！尽管代码片段可以回答问题，但添加一些额外的信息，如解释等，仍然很棒。 - j0k

好的。我的英语很差，但我会尝试。 - jetli13

@jetli13 وˆ‘çڑ„Firebugوڈگç¤؛Error: The operation is insecure. "rules = styleSheet.cssRules,"م€‚وœ‰ن»»ن½•وƒ³و³•هگ—ï¼ںن½؟用çڑ„وک¯Firefox 20.0.1ن¸ٹçڑ„FB 1.11.2م€‚ - RaphaelDDL

@RaphaelIDDL 我认为你需要的答案在这里 [链接] (https://dev59.com/dWUp5IYBdhLWcg3wf3ys)。 - jetli13

在Chrome控制台中对我也有效。 - Nils

Answer 2

我的项目Bless CSS可能是你正在寻找的。它可以分析文件并根据选择器限制在最佳点将它们拆分。

它也内置于CodeKit中。

- Paul Young

---

npm install -g bless then blessc count <path-to-file> - qff

Answer 3

有一种书签工具，可以告诉你在总CSS规则中使用了多少个CSS规则（这是您感兴趣的）。

CSS Crunch

- Adam Ayres

Answer 4

有些晚了，但对于任何寻找CSS选择器计数器的人： http://snippet.bevey.com/css/selectorCount.php 它非常简单，可以与多个样式表一起使用，甚至在达到4096限制时会告诉你。

- Babybird

Answer 5

一个简单的算法可以用于计算选择器，如果你想要将其作为构建过程的一部分或者不想在JS中处理：用","替换"{"和"}"之间的文本，然后计算","的数量。这将给出文件中选择器的数量。

- Laszlo Varga

Answer 6

在您的CSS文件中搜索并替换“{”为“{”。大多数编辑器都会告诉您已经完成了多少次替换...

- Julien B

---

这将仅计算规则的数量，而不是选择器的数量。每个规则可以有多个选择器，例如 h1，h2，h3 { margin: 0; }。 - Philip Walton

我认为你应该计算 { 的数量以及逗号的数量。就我所看到的，这将是一种非常简单的检测机制。 - Wouter

Answer 7

这将使用内联 CSS...

var selectors = 0;

$('style').each(function() {

   var styles = $(this).html();

   // Strip comments
   styles = styles.replace(/\/\*.+?\*\//sg, ''); 

   var matches = styles.match(/\{[\s.]*\}/g);

   selectors += matches.length;

});

jsFiddle。

- alex

Answer 8

在jetli13的回答基础上，十年后没有IE选择器限制，但是未来会有styled-components和超级CSS in JS生成器，我添加了以下内容：

1. 警告超过1000个样式
2. 即使有第三方外部规则，脚本也可以工作
3. 显示每个style标签或external样式表的样式添加
4. 允许您扩展单个CSS规则集

脚本-复制并在控制台中运行

您可以在SPA应用程序中路由更改后运行它，以查看添加了多少规则。

var
  styleSheets = document.styleSheets,
  totalStyleSheets = styleSheets.length,
  overAllDocumentRules =0;
try {
for (var j = 0; j < totalStyleSheets; j++){

    try{
  var
    styleSheet = styleSheets[j],
    rules = styleSheet.cssRules,
    totalRulesInStylesheet = rules.length,
    totalSelectorsInStylesheet = 0;

  for (var i = 0; i < totalRulesInStylesheet; i++) {
    if (rules[i].selectorText){
      totalSelectorsInStylesheet += rules[i].selectorText.split(',').length;
    }
  }
}
catch(err){
    console.warn("skipping>", styleSheet.href, err);
    console.warn(styleSheet)
}
if(totalRulesInStylesheet>1000) console.error("This stylesheet has over 1000 rules")
  console.log("Stylesheet: "+styleSheet.href);
  console.log(styleSheet)
  console.info("Total rules: "+totalRulesInStylesheet);
  overAllDocumentRules += totalRulesInStylesheet;
  console.warn("Total Document Rules > "+ overAllDocumentRules)
}
}
catch(err){
    console.warn("Error",err)

}

跨域样式表规则，也就是你的第三方在做什么

如果您需要在Safari Web Inspector中使用第三方样式，请执行以下操作：

输出

- Ramakay