Question

是否存在一个现有的插件/ app / program / script /，它可以分析和计算文件的css选择器？我想检查我的css文件在IE中不起作用的原因是因为我的选择器数量超过4095（我很确定不是）

谢谢！

P.S。如果有haml / sass /指南针解决方案加点数

Answer 1

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

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

有这个bookmarklet可以告诉你整个CSS规则（你感兴趣的）中使用的CSS规则的数量。

CSS Crunch

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

a bit to late, but for anyone how's looking for a css selector counter: http://snippet.bevey.com/css/selectorCount.php it's very simple, and can work with more than one stylesheet, it even tells you when you hit the 4096 limit

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

7 个答案: