Мне было поручено очистить более 5000 строк CSS. Во время разработки этого проекта мы в основном просто добавляем классы к этому массивному файлу CSS.
Мне поручено организовать классы по их страницам, а затем добавить к ним идентификатор страницы, чтобы они попали только на эту страницу.
Однако то, что заставляет это утомительно вручную выяснить, какие классы и идентификаторы находятся на странице, а затем организовывать их.
Есть ли способ "сбросить" все классы из стили, ТОЛЬКО на этой странице, в файл или что-то еще?
Чтобы получить массив используемых классов /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);
Это даст вам массив идентификаторов и массив классов на странице. вам тогда нужно сравнить это с декларациями стиля, чтобы найти те, которые соответствуют. Это, конечно же, не будет вырезать объявления, которые используют эти id и классы, но фактически не соответствуют каким-либо элементам на странице, вы можете решить эту проблему на вкладке аудитов, предложенной @jordanforeman.