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

Question

我有一个旧的样式表，现在已经充满了未使用的样式。问题是如何从中识别必要的和不必要的样式。是否有任何工具可以帮助解决这个问题？

- Cornish

---

可能是重复的问题：用于识别未使用的CSS定义的工具 - js1568

可能是重复的问题：如何在网站中查找未使用的图像和CSS样式？ - Patrick McElhaney

Answer 1

CSS Usage 是一款很棒的 Firefox 插件。它可以浏览多个页面并计算出哪些规则在这些页面中没有被使用，所以比只扫描单个页面的工具更准确。

- Fenton

---

+1 听起来不错 - 虽然我建议使用 Dust-Me，但这可能有点繁琐。我一定会研究一下这个工具。 - Mike

在CSS使用和Dust-Me之间，我更倾向于选择CSS使用，因为它提供了更多的信息。 - Gerry

Answer 2

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

- Mike

Answer 3

安装Google的页面速度插件，以便在Firebug中使用： http://code.google.com/speed/page-speed/ 然后，在Firebug中打开“pagespeed”选项卡，并选择“Performance”，点击“分析性能”。 如果当前页面存在未使用的样式规则，则会看到一个名为“Remove Unused Css”的列表项，其中包括当前页面上未使用的CSS规则的资源和内存大小，通过删除未使用的规则可节省内存空间。 这只是PageSpeed工具包的一个小功能，如果你对客户端页面性能感兴趣，应该熟悉它。 您可能还会对yslow感兴趣，它是雅虎为firebug开发的类似工具。

- alegscogs

Answer 4

这个名为“csscss”的工具可以去除重复的样式：

对我来说，保持CSS的最佳策略之一就是尽可能减少重复。虽然这不是万能药，但确实有所帮助。

要达到这个目标，你需要时刻记住所有规则集。这很难，但csscss很容易。让它告诉你哪些是冗余的。

- chrisjlee

Answer 5

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

使用Grunt自动删除未使用的CSS

- Deano

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

};

- Pranay Soni

Answer 7

npm install uncss -g

然后

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

- Jonathan