清理无用的CSS样式比较有用的几个工具

清理无用的CSS样式是优化网站性能的一个重要步骤之一。下面是使用比较有用的工具来清理无用的CSS样式的攻略，主要分为以下两个步骤：

第一步：查找无用的CSS

查找无用的CSS有多种方法，比如手动查找、使用浏览器开发者工具等。但是手动查找会十分麻烦、费时，并且容易漏掉一些细节，因此推荐使用一些工具来自动化查找无用的CSS。下面介绍几个比较有用的工具。

1.1 PurifyCSS

PurifyCSS是一款可以自动化查找无用CSS的工具，它的使用方法非常简单。首先，将需要查找无用CSS的HTML文件和CSS文件引入到项目中。然后，使用npm安装PurifyCSS：

npm install purify-css

接下来，在项目的脚本中使用PurifyCSS即可自动化查找无用CSS：

var content = ['index.html'];
var css = ['style.css'];

var options = {
  output: 'purified.css',
  rejected: true
};

purify(content, css, options, function (purifiedAndMinifiedResult) {
  console.log(purifiedAndMinifiedResult);
});

上述代码中，content变量存放了需要清理的HTML文件路径，css变量存放了需要被清理的CSS文件路径，output选项指定了清理后的CSS文件路径，rejected选项则指定了是否需要将被清理的CSS样式记录到日志中。

1.2 UnCSS

UnCSS是另一款可以自动化查找无用CSS的工具，其使用方法和PurifyCSS类似。首先，使用npm安装UnCSS：

npm install uncss

然后，在项目中使用UnCSS即可自动化查找无用CSS：

var uncss = require('uncss');
var fs = require('fs');

var html = fs.readFileSync('index.html', 'utf8');
var css = fs.readFileSync('style.css', 'utf8');

var options = {
  ignore: ['.nav-active'],
  stylesheets: ['style.css'],
  timeout: 1000,
  htmlroot: 'http://localhost:8888/'
};

uncss(html, options, function (error, output) {
  console.log(output);
});

上述代码中，html变量存放了需要清理无用CSS的HTML文件路径，css变量存放了需要被清理的CSS文件内容，options变量指定了需要忽略的CSS类名、CSS文件路径、超时时间和HTML文件根路径等信息。

第二步：清理无用的CSS

查找无用的CSS后，接下来就是需要清理无用的CSS。清理无用的CSS主要有两种方法：手动清理、自动清理。如果手动清理，那么需要使用开发者工具来逐个查找无用的CSS，然后手动删除；如果使用自动清理工具，那么就可以一键清理所有无用的CSS。

2.1 PurifyCSS

PurifyCSS可以自动清理无用的CSS，只需要将查找无用的CSS的代码稍作修改即可：

var content = ['index.html'];
var css = ['style.css'];

var options = {
  output: 'purified.css',
  rejected: false
};

purify(content, css, options, function (purifiedAndMinifiedResult) {
  fs.writeFile('purified.css', purifiedAndMinifiedResult, function (err) {
    if (err) throw err;
    console.log('CSS purged!');
  });
});

上述代码中，rejected选项被设置为false，指定了不需要记录被清理的CSS样式。清理后的CSS样式被写入了purified.css文件中。

2.2 Unused-CSS

Unused-CSS是另一款可以自动清理无用CSS的工具，其使用方法也非常简单。首先，使用npm安装Unused-CSS：

npm install unused-css -g

然后，在项目路径中执行以下命令即可自动清理无用CSS：

unused-css style.css index.html -r

上述命令中，style.css是需要被清理无用CSS的文件路径，index.html是需要查找无用CSS的HTML文件路径，-r选项则指定了需要使用正则表达式来匹配CSS选择器和HTML元素等信息。

示例

以Bootstrap为例，查找无用CSS的过程：

1. 首先，使用PurifyCSS来查找无用CSS：

var content = ['index.html'];
var css = ['bootstrap.min.css', 'style.css'];

var options = {
  output: 'bootstrap.purified.css',
  rejected: false
};

purify(content, css, options, function (purifiedAndMinifiedResult) {
  fs.writeFileSync('bootstrap.purified.css', purifiedAndMinifiedResult);
});

1. 然后，使用Unused-CSS来自动清理无用CSS：

unused-css bootstrap.purified.css index.html -r

执行完该命令后，即可得到清理后的bootstrap.min.css文件，里面只包含被使用的CSS样式。