CSS 如何从项目中的多个 CSS 文件中识别未使用的 CSS 定义

在本文中，我们将介绍如何从项目中的多个 CSS 文件中识别未使用的 CSS 定义。在开发网页或应用程序时，我们经常会使用多个 CSS 文件来管理各个页面或组件的样式。但是，随着项目的不断发展和修改，我们很可能会遇到一些未使用的 CSS 定义。这些未使用的 CSS 定义不仅增加了文件的大小，还可能导致加载时间延长和页面渲染速度下降。因此，及时识别并删除未使用的 CSS 定义非常重要。

阅读更多：CSS 教程

1. 使用浏览器开发者工具进行手动检查

浏览器的开发者工具是前端开发人员的重要助手之一。它提供了一种直观的方式来检查和调试网页的各个方面，包括 CSS 定义是否被使用。

在 Chrome 浏览器中，我们可以通过以下步骤进行手动检查：

打开要检查的网页，并右键点击其中一个元素。
在上下文菜单中选择“检查”选项，或按下 F12 打开开发者工具。
在开发者工具中，切换到“Elements”选项卡并查看右侧的“Styles”面板。
检查你感兴趣的元素的样式，并观察 CSS 规则是否被应用。
如果某个 CSS 规则未被应用，那么它很可能是未使用的 CSS 定义。

通过手动检查的方式，我们可以逐个元素地查找未使用的 CSS 定义。但是，对于大型项目而言，这种方法非常耗时且不够高效。

2. 使用工具自动检测未使用的 CSS 定义

幸运的是，有一些工具可以帮助我们自动检测项目中的未使用的 CSS 定义。以下是几个常用的工具示例：

2.1. Purity

Purity 是一个基于 JavaScript 的工具，可以分析 HTML 文件中的 CSS 类和 ID，从而找到未使用的 CSS 定义。它可以轻松地与构建流程集成，并根据你的配置自定义选择器的匹配规则。

使用 Purity 的示例命令如下：

purifycss src/**/*.{html,js} -o output.css

2.2. Unused-CSS

Unused-CSS 是一个基于 Node.js 的工具，可以从网页中查找和删除未使用的 CSS 定义。它可以通过使用无头浏览器自动化访问网页，并分析 DOM 树来确定标记是否匹配 CSS 规则。

使用 Unused-CSS 的示例命令如下：

unused-css -i src/index.html -s src/styles.css -o clean.css

2.3. PurgeCSS

PurgeCSS 是一个非常流行的工具，可以帮助我们从整个项目中删除未使用的 CSS 定义。它支持多种构建工具和框架，如 Webpack、Gulp、Vue 和 React。

使用 PurgeCSS 的示例配置如下：

const purgecss = require('purgecss');

const purgecssResult = purgecss.purge({
  content: ['./src/**/*.html', './src/**/*.js'],
  css: ['./src/styles.css'],
  safelist: ['className1', /^className2/],
});

console.log(purgecssResult[0].css);

以上只是一些常见的工具示例，选择合适的工具取决于你的项目配置和需求。

总结

通过本文，我们了解了如何从项目中的多个 CSS 文件中识别未使用的 CSS 定义。手动检查和使用工具是常用的方法，我们可以根据项目的大小和复杂度选择合适的方式。需要注意的是，识别未使用的 CSS 定义并不是一次性的任务，随着项目的不断迭代和修改，我们需要周期性地进行检查和清理，以提高页面加载性能和用户体验。