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

Question

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

谢谢！

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

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

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

它也内置在CodeKit中。

Answer 3

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

CSS 紧缩

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;

});

js小提琴。

Answer 5

在 CSS 文件中搜索并用“{”替换“{”。大多数编辑会告诉你做了多少次替换……</p>

Answer 6

如果您想将其作为构建过程的一部分或只是不想在 JS 中执行，则用于计算选择器的简单算法：

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

Answer 7

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

Answer 8

基于10 年后的 jetli13 的回答，没有 IE 选择器限制，但未来 JS 生成器中的 styledcomponents 和 mega 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 方样式，请执行以下操作：

输出