如何顯示CSS文件中沒有定義的所有類？

Question

是否有一個工具來顯示/突出顯示所有定義了某些類的元素，但是在css文件中定義的這些類沒有css規則？

比如我的HTML代碼，如：

... 
<div class="class_one">Some text for class one</div> 
<div class="class_two">Some text for class two obviously</div> 
... 

而且在.css文件有：

... 
.class_one { 
    color: red; 
} 
.class_three { 
    color: magenta; 
} 
... 

在這種情況下，如果需要知道的所有類裏面的CSS沒有定義，我應該知道「class_two沒有類定義」。此外，我應該指出，這個工具（或其他）不應該在線，因爲我使用本地LAMP包（MAMP Pro，在我的情況下）執行我的項目。

我希望我的英語不是那麼糟糕:)

Answer 1

如何顯示在CSS文件中沒有定義的所有類？

這很簡單：解析所有html元素，然後用class屬性的所有條目填充列表。之後，解析CSS並填充第二個列表。從第一個列表中刪除CSS列表的所有條目，並且您的類沒有CSS聲明。

請注意，如果您在JavaScript中使用動態創建的類名，則會變得複雜得多。

是否有一個工具來顯示/突出顯示所有定義了某些類的元素，但是在css文件中定義的這些類沒有css規則？

還沒有聽說過任何工具呢。

Answer 2

唯一的開箱即用的解決方案，我都碰上了是這個：http://unused-css.com/

雖然有一定的侷限性，顯然該網站有在線。但主要想法在該網站的原理圖中有明確的描述。您需要：

1. 收集所有使用的類/ IDS在HTML/JavaScript的
2. 收集在CSS定義的所有選擇
3. 跨兩個列表，看看還剩下什麼

雖然這似乎是一個簡單的任務，有時每個頁面都有不同的CSS，或者CSS動態呈現等。

編輯：

收集所有的ID和班級我的文件運行這些正則表達式：

<(.*)class="(.*)"(.*)> 
<(.*)id="(.*)"(.*)> 

（測試http://regexpal.com/）

用記事本++（或其他任何可以派上用場，而搜索模式），我會收集我的HTML中存在的所有項目（可能也會對其進行修改）。 然後我會將匹配的CSS類收集到一個正則表達式中，並將其與我的CSS進行匹配以查看缺少的內容。

Answer 3

你可以使用jQuery插件喜歡 -

http://csslint.net/about.html

，或者您也可以輸入你的CSS，發現錯誤和warnings.-

http://csslint.net/index.html