如何刪除多餘無用的css？

01-14

項目經過幾個版本的迭代，幾個css文件加起來都有快6k行了，目測一半都是沒用的代碼，有沒有自動的工具識別並刪除這些代碼？
網上搜了一些，要麼就是不好用，要麼就是只能搜索出沒用的css，不能自動刪除的。
有沒有人有更好的辦法？

UnCSS giakki/uncss 路 GitHub

及對應 Grunt task grunt-uncss

火狐的 CSS Usage 擴展是專門干這個的。用法是開啟 AutoScan 選項，手動翻看盡量多的頁面，手動觸發顯示盡量多的元素，以讓盡量多的規則起作用，然後就可以導出乾淨的 CSS 了。

https://addons.mozilla.org/en-US/firefox/addon/css-usage/

如果你用chrome的話，控制台有個audits tab，

選擇web page performance（也可以用默認），run一下就能看的以下信息：

Put CSS in the document head (1)

CSS in the document body adversely impacts rendering performance.

Link node application.css should be moved to the document head in http://xxx.xxx.xxx.xxx/

Remove unused CSS rules (3637)

3637 rules (93%) of CSS not used by the current page.

application.css: 93% is not used by the current page.(這裡還可以展開看列表)

Use normal CSS property names instead of vendor-prefixed ones (1)

application.css

.tooltip

"-webkit-box-shadow" is used, but "box-shadow" is supported.

Open the page in Google Chrome
Open the developer tools (Ctrl+Shift+I)
Under Audits tab -&> Select Audits to run - "Select All" select "Audits Present State"
click run
expand the "Remove unused CSS rules" item to view a list of style sheets that contain unused style rules.

寫好的css最好還是盡量少刪啦，因為可能現在沒起作用，在某一塊沒起作用，但是說不定以後能起作用，在別的地方能有用。在現在越來越強調代碼重用的環境下，我們只能在編碼初期就把代碼整體架構給打好。比如說選擇一個好的樣式重置，科學的浮動清除方式等等都是至關重要的。所以我覺得與其想辦法刪除一些多餘的css，倒不如把心思花在前期工作和css代碼的錘鍊上，畢竟事先解決比事後解決還是好一些的嘛。

為什麼要刪？注意規範和統一一下風格就好。

1. 刪掉原來的很全局的 css ，如設置所有select 或者 input 的；

2. 規範命名和風格，命名不要和控制項屬性的命名混淆就好。 select-list != SelectList

風格沒有最佳，大家統一一個就好。

今天也遇到了這個坑，學習了下然後總結出一共大概4種方法,看那種方便就可以用哪個：

1. gulp-uncss插件

2. tidycss插件

3. chrome 審計(audits)

4. firefox的css usage擴展

詳細點的總結成了博客，分享[幾種清除多餘CSS的方法和基本原理]

firfox 的 dust-me selectors 插件，比css usage 好用

unused-css.com/ 這個全是英文怎麼用啊

單頁面的話 chrome 檢測多餘CSS的插件，具體每次忘記了。公用樣式多的頁面則沒辦法檢測了