Подсчет количества селекторов в файле CSS

Question

существует ли существующий плагин / приложение / программа / скрипт / все, что анализирует и считает css-селекторы файла?Я хочу проверить, причина, по которой мой файл css не работает в IE, заключается в том, что мой селектор превышает 4095 (что, я уверен, что нет)

спасибо!

ps плюс баллы, если естьрешение haml / sass / compass

Answer 1

Следующий фрагмент может быть запущен в консоли Firebug в Firefox для подсчета общего количества селекторов 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 , может быть тем, что вы ищете.Он будет анализировать файлы и разбивать их в оптимальной точке на основе предела селектора.

Он также встроен в CodeKit .

Answer 3

Существует этот букмарклет, который сообщает вам количество используемых правил CSS из всех правил CSS (которые вас интересуют).

CSS Crunch

Answer 4

немного поздно, но для всех, кто ищет счетчик выбора css: http://snippet.bevey.com/css/selectorCount.php это очень просто и может работать с несколькими таблицами стилей, даже если вы достигнете предела 4096

Answer 5

Простой алгоритм подсчета селекторов, если вы хотите сделать это как часть процесса сборки или просто не хотите делать это в JS:

Замените тексты между "{" и "}"с ",", а затем рассчитать количество ",".Это даст вам количество селекторов в файле.

Answer 6

Найдите и замените "{" на "{" в вашем файле CSS. Большинство редакторов скажут, сколько замен вы сделали ...

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 .