Определить все идентификаторы и классы CSS, используемые на конкретной странице HTML, из определенной таблицы стилей?

0

Мне было поручено очистить более 5000 строк CSS. Во время разработки этого проекта мы в основном просто добавляем классы к этому массивному файлу CSS.

Мне поручено организовать классы по их страницам, а затем добавить к ним идентификатор страницы, чтобы они попали только на эту страницу.

Однако то, что заставляет это утомительно вручную выяснить, какие классы и идентификаторы находятся на странице, а затем организовывать их.

Есть ли способ "сбросить" все классы из стили, ТОЛЬКО на этой странице, в файл или что-то еще?

  • 1
    Я почти уверен, что есть инструмент, который скажет вам, какие части таблицы стилей не используются для конкретной страницы (то есть остальное будет тем, что используется), хотя не может вспомнить имя.
  • 0
    Создать массив классов и идентификаторов, используемых на странице, было бы легко, однако использование этого для выяснения того, какие объявления стиля использовались, звучит сложно.
Показать ещё 3 комментария

1 ответ

1

Чтобы получить массив используемых классов /id, проведите цикл над каждым элементом документа и заполните массив. Очевидно, что это не очень эффективно, но, учитывая эту задачу, я сомневаюсь, что это вызывает беспокойство.

var idArr = [];
var classArr = [];
[].forEach.call(document.querySelectorAll("*"), function(element){
    if (element.id && idArr.indexOf(element.id) == -1) {
        idArr.push(element.id);
    }
    if (element.className) {
        var tempClassArr = element.className.split(" ");
        for (var i = 0; i < tempClassArr.length; i++) {
            if (classArr.indexOf(tempClassArr[i]) == -1) {
                classArr.push(tempClassArr[i]);
            }
        }
    }
});
console.log(idArr);
console.log(classArr);

http://jsfiddle.net/QLmNf/1/

Это даст вам массив идентификаторов и массив классов на странице. вам тогда нужно сравнить это с декларациями стиля, чтобы найти те, которые соответствуют. Это, конечно же, не будет вырезать объявления, которые используют эти id и классы, но фактически не соответствуют каким-либо элементам на странице, вы можете решить эту проблему на вкладке аудитов, предложенной @jordanforeman.

  • 0
    Хотя ... я не понимаю, зачем вам эти массивы, если вместо этого вы можете использовать результат на вкладке аудита. это даст вам список объявлений, которые не используются. Если вы удалите их с листа, у вас останутся те, которые используются.
  • 0
    Инструмент аудита хорош, но мне бы хотелось, чтобы он рассказал мне, что используется на странице из определенной таблицы стилей.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню