计算 css 文件中选择器的数量

Question

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

谢谢！

ps 如果有 haml/sass/compass 解决方案加分

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);
}

Answer 2

有一个小书签可以告诉您在总 CSS 规则（您感兴趣的）中使用的 CSS 规则的数量。

CSS紧缩

Answer 3

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

它还内置于 CodeKit 中。

Answer 4

这将执行内联 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。

Answer 5

搜索与在 CSS 文件中将“{”替换为“{”。大多数编辑会告诉你已经做了多少次替换......

Answer 6

如果您想在构建过程中执行此操作或者只是不想在 JS 中执行此操作，则可以使用简单的算法来计算选择器：

将“{”和“}”之间的文本替换为“,”，然后计算“，”的数量。这将为您提供文件中选择器的数量。

Answer 7

有点晚了，但对于任何人来说如何寻找 css 选择器计数器：
http://snippet.bevey.com/css/selectorCount.php
它非常简单，并且可以使用多个样式表，它甚至会在您达到 4096 限制时告诉您

Answer 8

基于 10 年后 jetli13 的答案，没有 IE 选择器限制，但未来 JS 生成器中会出现样式组件和大型 CSS ，我添加了以下

1. 警告超过 1000 种样式
2. 即使您有第 3 方外部规则，脚本也可以工作
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)

}

跨域样式表规则又名您的第 3 方在做什么

如果您需要 Safari Web 检查器中的第 3 方样式，请执行以下操作：

输出