卡卡網

如果你需要重構和清理你的CSS，那么，一些有用的工具可以用來幫助你識別重復項。本文將為你介紹幾款CSS檢測工具。

CSS Stats

CSS Stats對頁面上請求的 CSS 文件進行徹底審核。與許多類似的工具一樣，它提供了類似于儀表板的規(guī)則、選擇器、聲明和屬性視圖，以及偽類和偽元素。它還將所有樣式分解為組，從布局和結構到間距、排版、字體堆棧和顏色。

使用CSS Stats構建的特異性分數。較低的分數和較平坦的曲線更利于可維護性。

CSS Stats 提供的有用功能之一是CSS specificity score，它顯示了某些選擇器的特定性是多么不必要。較低的分數和較平坦的曲線更利于可維護性。

 
使用的顏色概述，按源代碼中的聲明順序打印，帶有CSS Stats。

它還包括使用的顏色概述，按聲明順序打印，總聲明與唯一聲明的分數，以及可以幫助你確定哪些屬性可能是創(chuàng)建抽象的最佳候選者的比較圖表。這是了解 CSS 中的主要問題在哪里以及應該關注什么的一個很好的開始。

Yellow Lab Tools

Yellow Lab Tools是一款免費的 Web 性能審核工具，但它還包括一些非常有用的幫助工具，可用于衡量 CSS 的復雜性——并提供有關如何解決這些問題的可行見解。 

 
Yellow Lab Tools突出了大量的 CSS 問題，以及可操作的建議。

該工具突出顯示重復的選擇器和屬性、舊的 IE 修復、舊的供應商前綴和冗余選擇器，以及復雜的選擇器和語法錯誤。顯然，你可以深入每個部分，并研究哪些選擇器或規(guī)則具體被覆蓋或重復。這是發(fā)現一些問題并迅速解決它們的絕佳選擇。

（點擊放大圖）
Yellow Lab Tools還顯示重復的選擇器以及它們的重復頻率

 一旦你進入舊供應商前綴的概述，你不僅可以檢查違規(guī)者，還可以檢查這些前綴適用于哪些瀏覽器。

 CSS Specificity Visualizer

 CSS Specificity Visualizer概述了 CSS 選擇器及其在 CSS 文件中的特殊性。提交樣式表后，該工具會返回一個特異性圖。x 軸顯示 CSS 中選擇器的物理位置，從左到右排列，第一個在左邊，最后一個在右邊。y 軸顯示選擇器的實際特異性，從底部最不具體的開始，到頂部最具體的結束。

（點擊放大圖）
Specificity Visualizer提供了一種可視化的方式來分析樣式表中 CSS 選擇器的特殊性

 一般來說，高特異性通常是一個危險信號，因此請注意尖峰圖和大量噪音。另一方面，具有整體低特異性和低噪聲量的向上趨勢圖可以被認為是“好”的。你還可以將鼠標懸停在單個數據點上以查看確切的選擇器或放大感興趣的區(qū)域。

Wallace

與其他工具不同，由 Bart Veneman 創(chuàng)建的Project Wallace還保留了 CSS 的歷史記錄。該工具通過查看特定的 CSS 相關指標（例如每條規(guī)則的平均選擇器、每條規(guī)則的最大選擇器和每條規(guī)則的聲明）以及 CSS 復雜性的一般概述來跟蹤 CSS 的狀態(tài)。

（點擊放大圖）
Wallace提供了關于 CSS 復雜性的完整儀表板，以及一些自定義指標。

DevTools CSS 審計

我們也可以使用 DevTools 的CSS 概覽面板。捕獲頁面后，它會提供媒體查詢、顏色和字體聲明的概述，但也會突出顯示你可以安全刪除的未使用聲明。

此外，CSS 覆蓋率返回頁面上未使用的 CSS 的概述。

 
通過代碼覆蓋率探索使用和未使用的 CSS 和 JavaScript 的數量

 有了“代碼覆蓋率”，經過幾個場景，包括大量的點擊、選項卡和窗口大小調整，從而收集覆蓋率數據。

DevTools 在Chrome、Firefox 和 Edge 中都可以使用。

Style Check

你一般怎樣檢查 CSS 對 HTML 元素的影響？直接在你的項目中，或者你是否有一個專用的測試 HTML 文件，其中包含你使用的所有 HTML 元素，以便一目了然地查看所有樣式？這里介紹一個采用類似方法的小工具：Style Check。好處：你不需要自己設置測試 HTML 文件，該工具會為你完成。

 
Style Check對 HTML 元素的影響

只需將你的.css文件上傳到 Style Check 即可審核其對純 HTML 元素的影響。你還可以選擇一個庫（Bedrocss、Bootstrap、Eric Meyer 的 CSS Reset 和 Normalize.css 可用）或輸入內聯(lián)樣式。元素范圍從標題和段落到媒體、列表和表格、按鈕、表單以及其他類型的輸入，以及諸如下標和上標、代碼、引號等詳細信息。

你使用什么工具？

理想情況下，CSS 審計工具將提供一些關于 CSS 影響渲染性能的嚴重程度以及哪些操作導致昂貴的布局重新計算的見解。它還可以突出顯示哪些屬性根本不影響渲染（就像 Firefox DevTools 那樣），甚至可能建議如何編寫更高效的 CSS 選擇器。

這些工具可以很好地識別瓶頸并更快地解決 CSS 問題。 

標簽: css