Создание нового CSS из старого файла CSS, который состоит только из необходимых селекторов, используя Javascript

Question

У меня есть файл CSS, который имеет более 2000 строк.Есть ли способ создать функцию mini js, которая будет анализировать html, извлекать только необходимые селекторы из этого файла .css и генерировать новые css?

Answer 1

Используйте IE9 (для более надежного StyleSheet DOM).Запустите этот скрипт в консоли JavaScript:

var used = [], unused = [];
[].forEach.call(document.styleSheets, function (ss) {
    [].forEach.call(ss.cssRules, function (r) {
        if (document.querySelector(r.selectorText)) {
            used.push(r);
        } else {
            unused.push(r);
        }
    });
});
console.log("Selectors that exist in this page: " + used.length);
console.log("Selectors that do not exist in this page: " + unused.length);

used.map(function (rule) {
    return rule.cssText;
}).join("\n");

Он выведет на консоль только те правила, которые вам необходимы для данной страницы.

Answer 2

Не решение JS, но вы уже проверили Dust Me ?

С сайта:

Извлекает все селекторы из всех таблиц стилей настраница, которую вы просматриваете, затем анализирует эту страницу, чтобы увидеть, какие из этих селекторов не используются.Затем данные сохраняются, чтобы при тестировании последующих страниц селекторы можно было вычеркнуть из списка по мере их обнаружения.

Вы можете протестировать страницы по отдельности или создать паук для всего сайта, и вы получитепрофиль, в котором селекторы нигде не используются.

Однако он не доступен для Firefox 8: (

Здесь - это решение javascript. У меня нетпопробовал это, но Dust Me сделал трюк для меня в прошлом.