從特定樣式表中識別特定HTML頁面中使用的所有CSS ID和類別？

我已被分配清理超過5,000行CSS的任務。在這個項目的開發過程中，我們基本上只是將類附加到這個龐大的CSS文件中。從特定樣式表中識別特定HTML頁面中使用的所有CSS ID和類別？

我負責根據他們的頁面組織課程，然後將頁面ID添加到他們，以使他們只能擊中該頁面。

但是，什麼讓這個單調乏味的是手動找出哪些類和ID在頁面中，然後組織它們。

有沒有辦法將樣式表中的所有類「轉儲」到僅僅在該頁面上的文件或其他東西？

來源

2014-04-14 eveo

我很確定有一個工具可以告訴你一個樣式表的哪些部分沒有用於特定的頁面（意思是剩下的將是什麼）不記得名字了。 –

生成一個頁面中使用的類和id的數組將很容易，但是使用它來確定哪些樣式聲明在使用聽起來很困難。 –

不，只需要使用任何核心CSS的所有類和ID。所有通用CSS都在我的jQueryMobile.css中，我不需要它，只需要我在我的HTML頁面中明確指出的指向特定css文件的類。我該怎麼做？@KevinB – eveo

要獲取正在使用的類/標識的數組，請遍歷文檔中的每個元素並填充數組。顯然這不是很有效，但考慮到手頭的任務，我懷疑這是一個問題。

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陣列和類的頁面上的陣列。那麼您需要將其與樣式聲明進行比較以找到匹配的樣式聲明。這當然不會削減使用這些id和類的聲明，但實際上並不匹配頁面上的任何元素，您可以使用@jordanforeman建議的審計選項卡來解決該問題。

來源

2014-04-14 18:47:40

雖然...我不明白爲什麼你甚至會需要這些數組，如果你可以使用審計選項卡的結果。它會給你一個未被使用的聲明列表。如果您從工作表中刪除了這些內容，則會留下正在使用的內容。 –

審計工具非常棒，但是，我希望它能告訴我什麼是從特定樣式表的頁面上使用的。 – eveo

從特定樣式表中識別特定HTML頁面中使用的所有CSS ID和類別？

回答

相關問題