如何删除多余无用的css?
程序员文章站
2022-05-11 17:55:08
...
项目经过几个版本的迭代,几个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代码的锤炼上,毕竟事先解决比事后解决还是好一些的嘛。
上一篇: CI中的表单验证 - unqiue
推荐阅读
-
如何屏蔽这样的下载 请高人点拨一下,问题有图片_html/css_WEB-ITnose
-
如何还原压缩的CSS/HTML/JS文件_html/css_WEB-ITnose
-
【急】如何快速高效地复制某个网页的一部分?使这一部分的布局与样式和原网站一样_html/css_WEB-ITnose
-
网页上的.swf如何下载?帮我看看这个怎么下载_html/css_WEB-ITnose
-
apk 瘦身系列③:删除没用的资源文件_html/css_WEB-ITnose
-
css - php的这个函数,前端如何去调用?
-
IE6、7下html标签间存在空白符,导致渲染后占用多余空白位置的原因及解决方法_html/css_WEB-ITnose
-
如何利用CSS实现图片的透明效果_html/css_WEB-ITnose
-
HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中_html/css_WEB-ITnose
-
如何使用gulp压缩博客的html、css、image、js