如何删除多余无用的css？
程序员文章站
2022-05-11 10:02:34
...
项目经过几个版本的迭代，几个css文件加起来都有快6k行了，目测一半都是没用的代码，有没有自动的工具识别并删除这些代码？
网上搜了一些，要么就是不好用，要么就是只能搜索出没用的css，不能自动删除的。
有没有人有更好的办法？
https://addons.mozilla.org/en-US/firefox/addon/css-usage/
UnCSS giakki/uncss 路 GitHub
及对应 Grunt task grunt-uncss
选择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. unused-css.com/ 这个全是英文怎么用啊 单页面的话 chrome 检测多余CSS的插件，具体每次忘记了。公用样式多的页面则没办法检测了 为什么要删？ 注意规范和统一一下风格就好。
1. 删掉原来的很全局的 css ，如设置所有select 或者 input 的；
2. 规范 命名 和 风格，命名不要和控件属性的命名混淆就好。 select-list != SelectList
风格没有最佳，大家统一一个就好。 写好的css最好还是尽量少删啦，因为可能现在没起作用，在某一块没起作用，但是说不定以后能起作用，在别的地方能有用。在现在越来越强调代码重用的环境下，我们只能在编码初期就把代码整体架构给打好。比如说选择一个好的样式重置，科学的浮动清除方式等等都是至关重要的。所以我觉得与其想办法删除一些多余的css，倒不如把心思花在前期工作和css代码的锤炼上，毕竟事先解决比事后解决还是好一些的嘛。
网上搜了一些，要么就是不好用，要么就是只能搜索出没用的css，不能自动删除的。
有没有人有更好的办法？
回复内容：
火狐的 CSS Usage 扩展是专门干这个的。用法是开启 AutoScan 选项，手动翻看尽量多的页面，手动触发显示尽量多的元素，以让尽量多的规则起作用，然后就可以导出干净的 CSS 了。https://addons.mozilla.org/en-US/firefox/addon/css-usage/
UnCSS giakki/uncss 路 GitHub
及对应 Grunt task grunt-uncss
- 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.
选择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. unused-css.com/ 这个全是英文怎么用啊 单页面的话 chrome 检测多余CSS的插件，具体每次忘记了。公用样式多的页面则没办法检测了 为什么要删？ 注意规范和统一一下风格就好。
1. 删掉原来的很全局的 css ，如设置所有select 或者 input 的；
2. 规范 命名 和 风格，命名不要和控件属性的命名混淆就好。 select-list != SelectList
风格没有最佳，大家统一一个就好。 写好的css最好还是尽量少删啦，因为可能现在没起作用，在某一块没起作用，但是说不定以后能起作用，在别的地方能有用。在现在越来越强调代码重用的环境下，我们只能在编码初期就把代码整体架构给打好。比如说选择一个好的样式重置，科学的浮动清除方式等等都是至关重要的。所以我觉得与其想办法删除一些多余的css，倒不如把心思花在前期工作和css代码的锤炼上，毕竟事先解决比事后解决还是好一些的嘛。