什么是 uncss
uncss 是一个用于从样式表中清除未使用 CSS 声明的命令行工具和 Node.js 模块。它在执行模拟页面浏览的情况下，相关的 CSS 样式会被筛选出来并从样式表中进行删除。
如何安装 uncss
uncss 是通过 npm 进行安装，你只需执行以下命令即可：
npm install -g uncss
使用 uncss
uncss 最简单的使用方式是运行一下命令：
uncss http://your-web-site.com > output.css
这个命令会加载 http://your-web-site.com 并且分析相关的 CSS 样式，未使用的样式会被过滤掉并生成一个没有未使用样式的 output.css。
你也可以通过以下命令使用本地文件执行 uncss：
uncss file:///path/to/your-file.html > output.css
不过请注意，使用 uncss 规约 [需要在 JavaScript 中启用异步加载](https://github.com/uncss/uncss#uncss-在-node-js-tc54） 部分这一部分进行相关配置。
样式文件可被忽略
您可以指定一个 .uncssignore 文件以使 uncss 忽略一些不必要的样式表。
.uncssignore 文件格式如下：
-- -------------------- ---- -------
- -- ------------ -----
----------------
- -----------
------------
- ----- ----- --
------ ----- -
- -
------ ----
-
-uncss 的深入了解
uncss 可以做到削减 CSS 样式文件，但同时你也需要额外注意几点：
- uncss 不会执行运行时生成的样式，比如 JavaScript 通过操作 DOM 或是添加 class 名称的方式修改。
- uncss 无法应对 AJAX 加载的内容和模板引擎生成的内容。
- uncss 不会将由 jQuery 风格的事件处理程序自动生成的 CSS 类识别为已使用样式。
- uncss 工具具有分析文件替换的功能。如果你以某种方式滥用该功能将会产生极其危险的效果。
综合来看，uncss 主要应用场景是一些网站宣传页，对于大规模前端项目使用案例如下：
uncss ./test/pages/index.html ./css/toolbar.css ./css/resources.css ./css/theme.css > ./css/optimized.css
你还可以在 uncss 的 API 中定义配置项，包括忽略一款特定的 CSS 样式表，忽略特定的选择器等等。具体信息请访问官方API 文档。
总结
uncss 是一个可以从样式表中清除未使用 CSS 声明的工具。它在设计概念上采用了浏览器的仿真，从而帮助开发人员在处理 CSS 样式文件方面拥有更多的灵活性。在选择 uncss 时请注意，它无法应对所有的 CSS 文件，因此请在正确的场景下使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/68743