34

我有一个旧样式表，现在充满了未使用的样式。问题是从不必要的中识别必要的。有什么工具可以帮助解决这个问题吗？

4

7 回答 7

26

CSS Usage是一个很棒的 Firefox 插件。您可以浏览多个页面，它会计算出哪些规则尚未在其中任何一个上使用 - 因此它比扫描单个页面的工具更准确。

于 2010-08-26T10:20:53.847 回答
3

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

于 2010-08-26T10:19:51.713 回答
2

为 firebug 安装 Google 的 pagespeed 插件：

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

然后在 Firebug 中，打开“pagespeed”选项卡，选中“performance”，点击“analyze performance”。

如果您在当前页面上有未使用的样式规则，以及许多其他有用的建议，您将看到一个标有“删除未使用的 Css”的列表项。单击以展开它并查看当前页面上出现的未使用的 css 规则的资源细分，以及通过删除未使用的规则将节省的内存大小。

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

您可能还对 yslow 感兴趣，这是一个由 yahoo 开发的类似 firebug 工具。

于 2010-12-29T04:04:51.017 回答
1

这个名为“csscss”的工具删除了重复的样式：

对我来说维护 CSS 的最佳策略之一是尽可能减少重复。这不是灵丹妙药，但肯定有帮助。

为此，您需要始终牢记所有规则集。这很难，csscss 很容易。让它告诉你什么是多余的。

于 2013-04-23T03:39:45.240 回答
1

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

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

于 2014-03-05T14:42:00.813 回答
0

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

};
于 2014-04-17T08:46:01.933 回答
0

npm install uncss -g

然后

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

于 2015-07-24T02:43:34.783 回答