做網頁寫CSS,若沒有事先規劃得當,只是隨興東刪西改,結果就有可能寫出一堆並沒有派上用場的無用選擇符。
無用選擇符通常無害,但,不清除掉的後遺症還是會有,譬如說:
- 因為命名相同產生的衝碼
- 因為繼承而影響到其他選擇符的宣告
過去要清除無用選擇符,似乎只能仰賴工人智慧,現在則有Dust-Me Selectors這個Firefox extension可以用,Firefox 1.5以上都可以裝,實在是便利好物。

安裝完Dust-Me Selectors,重新開啟Firefox後,可以在右下方的狀態列找到一個長得像是記錄板的小圖示。接著你可以瀏覽開啟你想要進行清除無用CSS選擇符的網站,頁面開啟完畢後,只要點擊這個記錄板小圖示,Dust-Me Selectors就會開始運作,不出幾秒就會算出該網頁究竟存在多少無用選擇符。

接著可以在跳出視窗看到Dust-Me Selectors列出來的清單報告:

甚至還可以把報告轉存成CSV檔。

實在是非常實用的小工具,只不過Firefox狂吃記憶體的問題不解決,每裝一個便利好物就形同往火狐大爆炸更跨進一步了。
Tags: