如何从肿的样式表中识别和消除未使用的CSS样式?
-
01-10-2019 - |
题
我有一个旧式样式表,现在充满了未使用的样式。问题是从不必要的情况下确定必要的东西。有什么工具可以帮助吗?
解决方案
CSS使用率 是一个很棒的Firefox加载项。您可以浏览多个页面,并且可以解决其中任何一个尚未使用的规则 - 因此,它比扫描单个页面的工具更准确。
其他提示
您可以尝试Firefox 我的尘埃选择器 添加在。
安装Google的Firebug的PagesPeed插件:
http://code.google.com/speed/page-speed/
然后在Firebug中打开“ PagesPeed”选项卡,然后选择“性能”,单击“分析性能”。
如果您在本页面上有未使用的样式规则,那么以及许多其他有用的建议,您将看到一个标有“删除未使用CSS”的列表项目。单击以展开它,并查看本页上出现未使用的CSS规则的资源的细分,以及通过删除未使用的规则可以节省的内存大小。
这只是PagesPeed Toolkit的一个小功能,如果您对客户端的页面性能感兴趣,那么您绝对会熟悉自己。
您可能也对Yslow感兴趣,Yslow是Yahoo开发的Firebug的类似工具。
这个 工具称为, ,“ CSSCSS”删除了重复的样式:
对我来说,维持CSS的最佳策略之一就是尽可能减少重复。这不是银弹,但肯定会有所帮助。
为此,您需要始终将所有规则集都包含在脑海中。这很难,CSSCS很容易。让它告诉你什么是多余的。
有一个非常方便的插件,称为UNCSS。它将自动消除未使用的CSS。查看此链接以获取更多信息:
使用Grunt自动删除未使用的CSS
gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
uncss: {
dist: {
files: [
{ src: 'index.html', dest: 'css/test.css' }
]
}
},
cssmin: {
dist: {
files: [
{ src: 'css/test.css', dest: 'cleancss/testmin.css' }
]
}
}
});
// Load the plugins
grunt.loadNpmTasks('grunt-uncss');
grunt.loadNpmTasks('grunt-contrib-cssmin');
// Default tasks.
grunt.registerTask('default', ['uncss', 'cssmin']);
};
npm install uncss -g
然后
uncss http://example.com/ > out.css