卡卡網(wǎng)

如果你需要重構(gòu)和清理你的CSS，那么，一些有用的工具可以用來幫助你識(shí)別重復(fù)項(xiàng)。本文將為你介紹幾款CSS檢測(cè)工具。

CSS Stats

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

使用CSS Stats構(gòu)建的特異性分?jǐn)?shù)。較低的分?jǐn)?shù)和較平坦的曲線更利于可維護(hù)性。

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

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

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

Yellow Lab Tools

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

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

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

（點(diǎn)擊放大圖）
Yellow Lab Tools還顯示重復(fù)的選擇器以及它們的重復(fù)頻率

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

 CSS Specificity Visualizer

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

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

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

Wallace

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

（點(diǎn)擊放大圖）
Wallace提供了關(guān)于 CSS 復(fù)雜性的完整儀表板，以及一些自定義指標(biāo)。

DevTools CSS 審計(jì)

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

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

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

 有了“代碼覆蓋率”，經(jīng)過幾個(gè)場(chǎng)景，包括大量的點(diǎn)擊、選項(xiàng)卡和窗口大小調(diào)整，從而收集覆蓋率數(shù)據(jù)。

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

Style Check

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

 
Style Check對(duì) HTML 元素的影響

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

你使用什么工具？

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

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

標(biāo)簽: css