在我們寫樣式的時(shí)候，頁面的css在經(jīng)歷幾個(gè)版本的修改之后，可能有些樣式已經(jīng)用不到了，或許將某些樣式更名了而原來的忘了刪除，總之頁面中可能存在著一些無用的樣式。這些無用的浪費(fèi)了一些服務(wù)器空間和帶寬消耗，也會(huì)增大我們的維護(hù)成本。那么有沒有一些辦法來清理那些無用的樣式呢？今天就讓我們來了解一下幾個(gè)比較有用的工具。

Dust-Me selectors

Dust-Me是一個(gè)很有用也很好用的Firefox插件，它可以分析到你的頁面中調(diào)用的所有css文件并分析那些在頁面中沒有被用到。

• 支持本地和遠(yuǎn)程樣式文件，包括使用<link>標(biāo)簽、<?xml-stylesheet?>處理指令、@import語句等方式引入的樣式文件；(但是不支持頁面中的<style>塊和內(nèi)聯(lián)樣式)
• 支持IE條件注釋中引入的樣式文件；
• 可以檢查一個(gè)頁面，也可以檢查整個(gè)網(wǎng)站；
• 支持CSS1選擇器、大部分CSS2和CSS3選擇器；
• 理解通用的CSS hack，比如 “* html #fuck-ie”將會(huì)被認(rèn)為是”html #fuck-ie”；
• 支持Firefox 3.5和Firefox 3.0，事實(shí)上得益于FF 3.5的js引擎的改進(jìn)，F(xiàn)F 3.5中的性能比FF 3.0要高50%。

安裝：點(diǎn)擊這里。同時(shí)，你可以下載該項(xiàng)目的源代碼，了解更多請?jiān)L問 Dust-Me selector官方頁面。

Page Speed

Page Speed是Google提供的一個(gè)前端性能分析工具，有些類似于YSlow，但是提供了一些比較個(gè)性且很有用的工具，比如Remove unused CSS：

Page Speed和YSlow一樣依賴Firebug，了解詳情和安裝請?jiān)L問這里。

CSS Redundancy Checker

CSS Redundancy Checker 是一個(gè)免費(fèi)的在線應(yīng)用，可以檢查所有的使用某個(gè)CSS文件的頁面中無用的樣式?？梢酝瑫r(shí)檢查某一個(gè)樣式在多個(gè)頁面中的使用情況。該工具的不足是雖然一次能檢查多個(gè)HTML頁面，但每次只能檢查一個(gè)CSS文件，而且還要手動(dòng)輸入：

IntelliJ IDEA

IntelliJ IDEA 這是一個(gè)頗強(qiáng)大的IDE，類似于DreamWeaver，不過在國內(nèi)用的不多。該軟件包括一個(gè)即時(shí)代碼分析工具(On-the-fly Code Analysis)，可以分析CSS文件中未用到的class和id。

Expression Web

Expression Web作為微軟的新一代網(wǎng)站開發(fā)工具，還是有很多人使用的，其CSS Report功能可以檢查未用到需要被清除的CSS（我的確沒有使用EW開發(fā)過網(wǎng)站，希望使用該軟件的童鞋可以幫忙確認(rèn)一下這一點(diǎn)）。

結(jié)語

當(dāng)然可能還有其它的某些工具這里沒有提到，如果大家有所了解，可以與大家分享。

另外，通常我們將整個(gè)網(wǎng)站的樣式寫入一個(gè)或多個(gè)樣式文件中，然后在頁面中全部調(diào)用或者分模塊調(diào)用，那么某個(gè)CSS文件中的樣式可能在某個(gè)頁面中的確沒有用到但是在其它的頁面中被用到了，所以使用這些工具檢測CSS文件中多余的樣式的時(shí)候，需要保持一定的謹(jǐn)慎，清除樣式可能會(huì)影響到其它的頁面，所以page speed提供的檢查結(jié)果只適用于單個(gè)頁面，不適合整個(gè)網(wǎng)站，而使用Dust-Me或CSS Redundancy Checker的時(shí)候可以對整個(gè)網(wǎng)站或者網(wǎng)站的多個(gè)頁面同時(shí)檢查，這樣可能能避免萬無一失。

PS:Thanks to Knowledge Capsules’s work very much.