2008-11-12 114 views
23

我已經接管了一家由另一家公司開發的相當複雜的網站,坦率地說這是一團糟。我的問題之一是,在編寫html時似乎沒有任何規範,所以雖然他們廣泛使用了css,但有六個css文件,粗略的分析顯示css文件中有大量的樣式沒有被任何html引用 - 而是包含錯誤的重新設計開始和舊的,現在多餘的樣式,與當前項目混合。CSS清潔器

我真的很想清理所有這些,然後再繼續。是否有任何工具,開源或其他,可以採取一堆html和css文件,並交叉引用它們,以突出在css中的cruft?

回答

21

嘗試使用Firefox的Dust me Selectors插件。

+0

我建的java代碼一個小一點的是需要從塵埃我輸出的CSV,並從指定的樣式表中刪除這些樣式,並輸出一個乾淨的css文件。這裏:https://github.com/willwarren/cssclean – Will 2013-02-27 03:38:42

2

塵埃我選擇幾乎是我的jquery css cleaner有相同的功能。

它看上去很不錯

,如果你沒有Firefox中你可以使用我的插件。

2

我相信有!我一直在使用它。事實上,有2個,我將與你分享他們。

  1. 如果你想在網上免費自動標記生成CSS,那麼你就需要這樣的: http://beecss.theextremewebdesigns.com/

  2. 如果你已經有了(亂)CSS &你想清除/再壓縮它免費在線,那麼你就需要這樣的: http://beecss.theextremewebdesigns.com/css_clean_css_minify/

我喜歡上面的工具,因爲我已經評估的其他清潔劑在那裏&我發現其他人在某些方面缺乏功能。例如,一些清潔工完全忽略了多個班級,或者只是抓住第一堂課。他們忘記了以下課程將覆蓋第一類的風格,因此首先要讓所有選擇器&生成&是非常重要的。我發現只有BeeCSS - CSS Generator可以在這裏做出令人敬畏的工作!從那時起,我已將BeeCSS CSS Generator & BeeCSS Cleaner Minifier &加入到我的所有項目中。我強烈推薦他們兩個。

我的經驗,我有這個解決方案給你。

  1. 你的HTML簡單地複製到一個新的HTML頁面&保存。然後上傳這個HTML頁面在http://beecss.theextremewebdesigns.com/。這將只給你在文檔中實際使用的選擇器&類。所以如果他們在CSS文件中有多餘的樣式,你可以通過這種方式輕鬆擺脫它們。

  2. 然後,只需搜索類別& BeeCSS在原始CSS文件&中生成的選擇器將這些樣式複製到由BeeCSS生成的新CSS。這樣,您將確保您的CSS現在只有HTML文檔正在使用的樣式。

  3. 在完成上述步驟中粘貼的&粘貼後,您會發現樣式在CSS中的外觀可能會很混亂。不要開始手動清理它們。我的意思是,不要試圖修復製表符,空格等等。只需將所有樣式複製到BeeCSS - 清潔縮小器中,然後點擊「清潔CSS」按鈕,即http://beecss.theextremewebdesigns.com/css_clean_css_minify/ &。這應該給你最終的結果。它將只包含在HTML文檔中實際使用的選擇器&類。如果你想減小CSS的尺寸,只需在BeeCSS Cleaner Miniifer &中拷貝樣式,點擊「Minify CSS」按鈕,就可以生成縮小版本的「New」css。

以上是當我在我的項目&的工作,我按照他們的工作絕對是非常適合我的步驟。 BeeCSS的真棒在於,事實上,兩個CSS發電機&清潔Minifier完全免費&易於使用&您可以在幾秒鐘內在線生成/清理CSS。您不需要安裝任何擴展程序,應用程序等。因此,您將不會用笨拙的擴展程序加載瀏覽器,也不需要等待數小時才能完成此過程。如果你遵循我的指示,你會在幾秒鐘內完成(除了款式複製部分)

希望有所幫助。

0

在sourceforge上有一個新的CSS掃描儀。它搜索你的css,html,aspx,php,javascript和jquery代碼,以查看已使用和未使用的css/stylesheet選擇器和類。這可能正是你想要的。它在Windows下運行(因爲它是.net代碼)。 這是它的URL,如果你想看看: http://sourceforge.net/projects/cssscanner/