如何从肿的样式表中识别和消除未使用的CSS样式？

StackOverflow https://stackoverflow.com/questions/3574136

  •  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

使用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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top