題:
刪除未使用的CSS的工具
Fractaliste
2014-03-15 03:40:27 UTC
view on stackexchange narkive permalink

對於某些Web開發項目，我開始使用一些外部前端框架。我不是一個好的設計師，所以他們非常有用，但是我從來沒有利用他們一半的能力。

因此，為了節省我的 CSS 文件的空間，我尋找一種能夠理解我的DOM體系結構和 CSS 文件，然後刪除所有無用聲明的工具。

  • 我不在乎它是否是網絡-app，IDE或瀏覽器插件或Linux / Windows桌面應用程序。
  • 輸入： .html 文件（但如果您有其他建議，我很感興趣）
可能有一個非常不錯的新選項...這是一個Nodes.js / Grunt插件[CSSRazor]（https://www.npmjs.org/package/grunt-cssrazor）-只是添加為註釋，因為我剛剛找到了它並且還沒有使用過，但是可能很棒。如果在幾天的測試中喜歡它，我將對其進行記錄。
並找到了比CSSRazor更好的產品。用unsss很快回答
六 答案:
Nick Dickinson-Wilde
2014-04-02 22:44:59 UTC
view on stackexchange narkive permalink

我必須說，我認為此選項比我最初的建議要好；我最初的建議非常適合快速瀏覽，這更適合製作發行包。

UnCSS，尤其是我基於該建議的是 The Grunt wrapper對於UnCSS；當然，它可以集成到 Grunt構建系統中以實現高度自動化。

有很多自定義選項（也詳細列出了），並且它支持本地和遠程css文件作為源。

如果在 Grunt中使用，我建議與 grunt-processhtml一起使用以自動製作您的頁面引用了新的串聯並清理後的CSS文件。

我如何使用它：（是gruntfile.js的一部分）

  grunt。 initConfig（{pkg：grunt.file.readJSON（'package.json'），uncss：{main：{選項：{報告：'gzip'}，文件：{'<％= grunt.option（“ outpath”）％ > / css / cleaned.css'：'<％= src_files_html％>'，}}}，processhtml：{main：{options：{strip：false}，files：[{expand：true，cwd：``，s rc：'<％= src_files_html％>'，dest：'<％= grunt.option（“ outpath”）％>'}]}}

，然後在我的html文件中有這個：

  <！-build：css ./css/cleaned.min.css --> <link rel =“ stylesheet” href =“ // netdna.bootstrapcdn.com/bootstrap /3.1.1/css/bootstrap.min.css"> <link rel =“ stylesheet” href =“ // netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"> <link href =“ ./ css / style.css” rel =“ stylesheet” > <！-/ build -->

，它會轉換為：

  <link rel =“ stylesheet” href =“ ./ css / cleaned.min.css” >

，而CSS是 lot ，體積更小，性能和移動帶寬更好。

Nick Dickinson-Wilde
2014-03-15 05:07:38 UTC
view on stackexchange narkive permalink

我有一個不錯的選擇-至少我完全喜歡它-儘管它既不是Web應用程序也不是Linux應用程序。

我建議使用Firefox插件 CSS用法 -它確實需要 Firefox和Firefox插件 Firebug。

enter image description here

用法：

  • 只需加載頁面（通過Web，本地主機（如我的圖片），甚至只是文件系統），
  • 打開firebug控制台並單擊css用法選項卡
  • 單擊 SCAN
  • 查看，如果您要導出已清理的css（僅可從文件系統可靠地工作-儘管這應該是對插件的次要修復-我有時會這樣做）

不幸的是，導出的已清理css帶來了一些麻煩；刪除了一些規則（很好），但有些前綴是 UNUSED。應該有一個IMO選項刪除它們，但目前我不相信（至少，如果我從未發現過）。

作為一種變通辦法，我一直做的就是將其複制並粘貼到記事本++，並用於搜索nd將此正則表達式替換為搜索字符串： UNUSED \ .. *？\} （然後選擇。匹配換行符），並使用空白替換符來消除它們。 -要在Sublime中執行相同的操作，可以使用（？s）UNUSED \ .. *？\} 作為正則表達式。其他大多數優秀的文本編輯器也應具有類似的功能。

我可以導出的清理過的CSS並不干淨：它僅在每個未使用的語句之前添加** UNUSED **。是否需要進行任何配置才能使其正常工作？
但是，他仍然需要打開所有站點頁面，以便該工具記錄所有內容。也許那時html的某些元素未顯示_（用戶未登錄，因此沒有“編輯配置文件”選項卡，因此沒有使用#edit_profile css元素）並在所有條件下運行。
@Joraid:是的，雖然大多數網站只需要打開每種類型的一頁即可獲取所有類/ id，但仍然可以打開並掃描每個頁面/ AJAX內容。您可以使用“自動掃描”功能來減少手動工作。
bhaskarc
2015-04-02 22:50:53 UTC
view on stackexchange narkive permalink

我已經使該基於瀏覽器的在線未使用的CSS移除工具。

功能：

  1. 基於瀏覽器。無需安裝。
  2. 針對多個URL檢查CSS。
  3. 提供用於手動選擇/取消選擇CSS文件中各項的選項。
  4. 開放源代碼
    5. ol>

    免責聲明：我是代碼的作者。

Franck Dernoncourt
2014-03-15 05:45:32 UTC
view on stackexchange narkive permalink

IntelliJ IDEA具有一些強大的Web開發功能功能：

您需要擁有Ultimate Edition才能訪問Web開發功能（如果您是項目負責人或開源項目中的常規提交者。）

OP要求使用一種工具來刪除未使用的CSS。有許多免費選項可以找到未使用的CSS。 Chrome開發者工具有一個。
jitbit
2018-03-27 23:04:10 UTC
view on stackexchange narkive permalink

我們為此編寫了一個免費的在線工具：未使用的CSS

它以遞歸方式爬網您的網站（遵循內部鏈接）並找到未使用的選擇器（許多其他工具僅處理一頁）

Sam Dufel
2014-03-15 05:05:56 UTC
view on stackexchange narkive permalink

我之前在一些項目中使用過firebug插件 CSS用法-唯一的缺點是您必須手動瀏覽整個網站，才能準確了解所使用的樣式。

但是，它將為您提供css文件的簡化版本，可用於替換當前樣式表。

歡迎使用軟件建議書堆棧交換！這篇文章沒有包含足夠的信息，不能被認為是高質量的答案。請[閱讀我們對優質答案的討論]（http://meta.softwarerecs.stackexchange.com/q/356/226），看看是否可以將其中一些改進納入答案中，否則將會刪除。


ⓘ
該問答將自動從英語翻譯而來。原始內容可在stackexchange上找到，我們感謝它分發的cc by-sa 3.0許可。
Loading...