如何为精简的 CSS 文件删除未使用的 CSS
精简的网站比臃肿的网站运行得更快，这已经不是什么秘密了。不要让不必要的 CSS 拖累您的 Web 项目；使用下面描述的工具和技术来帮助您删除未使用的 CSS 并提高您网站的整体性能。
什么是未使用的 CSS？#
无论您作为开发人员的经验有多丰富，您的网站很有可能包含对当前页面元素没有影响的 CSS。例如，像Bootstrap这样的框架带有许多您可能不需要的 CSS 样式。如果您在开发过程中添加了一个功能并在稍后删除它，那么与该功能相关的规则仍然存在于您的样式表中。未使用的 CSS 只会给您的应用程序增加负担，并导致网页大小的增长，因此您要确保尽可能少地使用多余的代码。
为什么要删除未使用的 CSS？#
由于 CSS 定义了 HTML 文档中内容的显示方式，因此用户的浏览器必须先下载并解析所有外部 CSS 文件，然后才能开始呈现内容。因此，网页包含的 CSS 越多，用户必须等待更长的时间才能在屏幕上看到任何内容。内联小 CSS在您的 HTML 文件中并缩小您的外部样式表可以帮助优化内容呈现，但删除无用的 CSS 是提高整体性能的更有效的策略。结合所有这些方法可确保用户在互联网连接允许的情况下尽快看到内容。除了降低网站的整体性能外，过多的 CSS 还会让开发人员头疼。整洁有序的样式表比杂乱无章的样式表更容易维护。通过抛弃未使用的 CSS 来帮助您的用户和您自己。
如何手动删除未使用的 CSS#
如果您使用的是 Chrome，DevTools 选项卡有一个方便的工具，可让您查看页面上正在执行的代码，以及未执行的代码。要访问此工具，请按照以下步骤操作：
使用以下命令打开命令菜单：
cmd + shift + p输入“Coverage”并点击“Show Coverage”选项
从 Coverage 选项卡中选择一个 CSS 文件，这将在 Sources 选项卡中打开该文件
任何靠近绿色实线的 CSS 都表示代码已执行。纯红色表示它没有执行。一行红色和绿色的代码表示只执行了该行上的一些代码。
仅仅因为一个样式没有在一个页面上使用并不意味着它没有在其他地方使用，所以您应该审核站点上的几个页面并跟踪哪些规则一直出现在未使用的列表中。为此，您可以将每次审核的结果复制并保存到 Google 表格文档中。那些出现最多的可能可以安全地删除。
删除未使用的 CSS 的工具#
大多数开发人员有更好的事情要做，而不是一一删除未使用的 CSS 规则。这就是为什么设计了多种工具来自动化该过程的原因。以下是旨在帮助 Web 开发人员从其 Web 项目中删除未使用的 CSS 的最流行工具的概述：
1.未使用的CSS#
简单的名称表明该程序的用户友好性。只需将您网站的 URL 插入UnusedCSS并让它完成所有工作。除了识别和删除未使用的 CSS 规则之外，它还告诉您节省了多少内存。您可以免费试用 UnusedCSS，但您必须支付每月会员费才能下载清理过的 CSS 文件。高级会员可以安排自动 CSS 优化并可以使用其他功能；但是，需要注意的是 UnusedCSS 仅适用于实时网站，因此在测试阶段没有用。
2.净化CSS#
PurifyCSS是一款免费工具，可在您上线之前从您的 HTML、PHP、JavaScript 和 CSS 文件中删除未使用的 CSS。不利的一面是，您必须手动指定要一个一个扫描的文件，这使得该过程有些乏味。PurifyCSS 不会修改您的原始文件，而是输出一个带有优化 CSS 的新文件。由于 PurifyCSS 不适用于实时网站，因此您需要在开发环境中使用它。您可能希望在开发过程中使用 PurifyCSS，稍后升级到 UnusedCSS。
3.清除CSS#
PurgeCSS 的灵感来自 PurifyCSS，因此看起来非常相似，但使用起来更加精简和直观。它的工作原理是将您的内容与 CSS 文件进行比较并删除不匹配的选择器。唯一的主要缺点是您必须手动将不在指定路径中的 CSS 列入白名单，如果您的网站使用某些插件（例如 HTML 表单），这可能会让人头疼。
4. 取消CSS#
UnCSS比 PurgeCSS 更准确，因为它查看实际网页而不是单个文件，但速度较慢，需要更多的手动设置。UnCSS 与其他工具一起使用时最有用。例如，您可以将 UnCSS 与 Grunt 和 Node.js 结合使用，以自动移除未使用的 CSS。
关于删除未使用的 CSS 的警告#
本教程中讨论的工具并不完美。有几种不同的方法可以识别 Rouge CSS 选择器；但是，如果您的元素依赖于 API 和第三方脚本，那么将选择器与 DOM 中的元素进行匹配可能会很棘手。如果您想尝试手动删除未使用的 CSS，那么您需要格外小心，以免因删除重要内容而意外削弱您的应用程序。也就是说，您应该比任何人都更了解您的网站，而 DevTools 审核功能可以提供一些有价值的见解，帮助您从一开始就创建更严格的 CSS。
如何使用 UnCSS 自动删除未使用的 CSS#
现在，让我们看看如何使用上面列出的工具之一来修剪样式表。本教程，感谢Dean Hume，将解释如何在 Windows 机器上设置 Node.js、Grunt、UnCSS 和另一个名为 CSSmin 的插件，以自动删除未使用的 CSS 并缩小结果。
1. 安装 Node.js#
从Node.js网站下载最新的发行版并按照安装说明进行操作。
2.安装咕噜#
打开 Node.js 并在命令提示符中输入以下内容：
npm install -g grunt-cli
Grunt 应该会自动下载并安装。
3. 打开你的项目文件夹#
使用 Node.js 命令提示符，导航到包含您希望 UnCSS 扫描的文件的文件夹。您可以通过输入文件路径来执行此操作。例如：
cd C:TestProject
4. 安装 UnCSS 和 CSSMin#
在 Node.js 命令提示符中输入以下内容：
npm install grunt-uncss grunt-contrib-cssmin --save-dev
UnCSS 和 CSSMin 包将安装在指定的项目文件夹中。
