如何删除未使用的css代码

在前端开发中，随着项目的增大和迭代，css文件很容易变得臃肿。其中可能包含很多未被使用的css样式，这些无用的代码不仅影响网页加载速度，也让代码维护变得困难。因此，及时清理未使用的css代码是非常重要的。本文将详细介绍如何找到并删除未使用的css代码。

工具准备

一般而言，我们可以借助一些工具来帮助我们找到未使用的css代码，比如：

Chrome 开发者工具

PurifyCSS

UnusedCSS

在本文中，我们将主要使用Chrome开发者工具和PurifyCSS来演示如何删除未使用的css代码。

使用Chrome开发者工具查找未使用的CSS代码

Chrome开发者工具是前端开发者必备的调试工具之一，它不仅可以帮助我们调试JavaScript代码，还可以帮助我们分析页面加载性能和查找未使用的css代码。

步骤

打开你的网页，在需要查找未使用的css代码的页面上右键，选择”检查”，或者按下快捷键F12打开开发者工具。

在开发者工具中，选择”Coverage”选项卡。

点击“Reload”按钮，页面会重新加载，并在Coverage选项卡中展示所有加载的css文件和js文件。

在css文件列表中，会显示每个文件被页面使用的具体百分比，你可以看到哪些css文件或者css代码没有被使用。

点击未被使用的css文件，开发者工具会高亮显示出未使用的css代码行。

示例

假设我们有一个网页，其样式表如下所示：

/* styles.css */

body {

font-size: 16px;

color: #333;

}

h1 {

font-size: 24px;

}

.page-header {

background-color: #f1f1f1;

padding: 10px;

}

.main-content {

width: 80%;

margin: 0 auto;

}

.footer {

text-align: center;

color: #666;

}

我们可以通过Chrome开发者工具的Coverage功能来查找未使用的css代码。假设我们发现.footer这个类在页面中并未被使用，在开发者工具中会高亮显示出来，我们可以直接删除这部分未使用的代码。

使用PurifyCSS删除未使用的CSS代码

除了Chrome开发者工具外，还有一些工具可以帮助我们删除未使用的css代码，其中PurifyCSS就是一个很不错的选择。

步骤

首先，安装PurifyCSS。你可以通过npm来安装PurifyCSS：

npm install -g purify-css

接下来，在你的项目中生成一个包含所有用到的css样式的文件，比如all-styles.css。

运行PurifyCSS命令，指定需要检查的html文件和包含所有用到的css样式的文件，以及需要输出的文件：

purifycss src/index.html all-styles.css --min --out purified.css

这个命令将会生成一个purified.css文件，其中只包含在src/index.html中使用到的css样式。

示例

假设我们有一个html文件index.html，内容如下所示：

Hello World!

我们有一个包含所有样式的css文件all-styles.css，内容与前面示例中的styles.css相同。

我们可以运行PurifyCSS命令来删除未使用的css代码：

purifycss index.html all-styles.css --min --out purified.css

执行完命令后，purified.css文件中只会包含index.html中使用到的样式。

结语

删除未使用的css代码是前端开发中的一项重要工作，可以减少页面的加载时间，提高网页性能，并使代码更加整洁易维护。