Maison > interface Web > Tutoriel H5 > 如何删除多余无用的css?

如何删除多余无用的css?

WBOY
Libérer: 2016-06-07 08:42:47
original
3003 Les gens l'ont consulté

项目经过几个版本的迭代,几个css文件加起来都有快6k行了,目测一半都是没用的代码,有没有自动的工具识别并删除这些代码?
网上搜了一些,要么就是不好用,要么就是只能搜索出没用的css,不能自动删除的。
有没有人有更好的办法?

回复内容:

火狐的 CSS Usage 扩展是专门干这个的。用法是开启 AutoScan 选项,手动翻看尽量多的页面,手动触发显示尽量多的元素,以让尽量多的规则起作用,然后就可以导出干净的 CSS 了。
addons.mozilla.org/en-U

UnCSS giakki/uncss 路 GitHub
及对应 Grunt task grunt-uncss
  1. Open the page in Google Chrome
  2. Open the developer tools (Ctrl+Shift+I)
  3. Under Audits tab -> Select Audits to run - "Select All" & select "Audits Present State"
  4. click run
  5. expand the "Remove unused CSS rules" item to view a list of style sheets that contain unused style rules.
如果你用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 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代码的锤炼上,毕竟事先解决比事后解决还是好一些的嘛。
Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal