Question

我有一个旧样式表，现在已经充满了未使用的样式。问题是从不必要的角度确定必要的。有没有工具可以帮助解决这个问题？

Answer 1

CSS Usage是一个出色的Firefox加载项。您可以浏览多个页面，它可以确定哪些规则尚未使用 - 因此它比扫描单个页面的工具更准确。

Answer 2

您可以尝试使用Firefox Dust-Me Selectors插件。

Answer 3

为firebug安装Google的pagespeed插件：

http://code.google.com/speed/page-speed/

然后在Firebug中，打开“pagespeed”标签，选中“效果”，点击“分析效果”。

如果您在当前页面上有未使用的样式规则，那么除了许多其他有用的建议外，您还会看到标记为“删除未使用的Css”的列表项。单击以展开它，并查看当前页面上显示的未使用的css规则的资源细分，以及通过删除未使用的规则将保存的内存大小。

这只是pagespeed工具包的一个小功能，如果您对客户端的页面性能感兴趣，那么您一定要熟悉它。

您可能也对yslow感兴趣，这是一种由雅虎开发的类似火炬的工具。

Answer 4

此tool called，“csscss”会删除标识重复的样式：

我维护CSS的最佳策略之一就是减少   尽可能重复。这不是一颗银弹，但确实如此   帮助

要做到这一点，你需要掌握所有规则集   倍。这很难，csscss很容易。让它告诉你什么是多余的。

Answer 5

Grunt有一个非常方便的插件叫做UnCSS。它会自动删除未使用的CSS。查看此链接以获取更多信息：

Remove Unused CSS automatically using Grunt

Answer 6

使用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']);

};

Answer 7

npm install uncss -g

然后

uncss http://example.com/ > out.css

如何从膨胀的样式表中识别并消除未使用的CSS样式？

7 个答案: