大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 UnCSS

UnCSS 是一个从样式表中删除未使用的 CSS 的工具，可以跨多个文件工作，并支持 Javascript 注入的 CSS。

UnCSS 删除未使用规则的过程如下：

HTML 文件由 jsdom 加载并执行 JavaScript。所有样式表均由 PostCSS 解析。document.querySelector 过滤掉 HTML 文件中找不到的选择器。其余规则将转换回 CSS。

但是使用 Uncss 需要注意以下几点：

UnCSS 不能在非 HTML 页面上运行，例如：模板或 PHP 文件。 如果开发者需要针对模板运行 UnCSS，应该从模板生成示例 HTML 页面，并在这些生成的文件上运行 uncss； 或者运行一个实时的本地开发服务器，并将 uncss 指向该服务器。UnCSS 仅运行在页面加载时运行的 Javascript。 它不会（也不能）处理在用户交互（如按钮单击）上运行的 Javascript。 必须使用 ignore 选项来保留 Javascript 在用户交互时添加的类。

目前 uncss 在 Github 上通过 MIT 协议开源，有超过 9.3k 的 star，194k 的项目依赖量，是一个值得关注的前端开源项目。

如何使用 UnCSS

下面是在 Node.js 环境中使用 uncss 的示例：

var uncss = require('uncss');var files = ['my', 'array', 'of', 'HTML', 'files', 'or', ';],  options = {    banner: false,    csspath: '../public/css/',    htmlroot: 'public',    ignore: ['#added_at_runtime', /test\-[0-9]+/],    ignoreSheets: [/fonts.googleapis/],    inject: function (window) {      window.document        .querySelector('html')        .classList.add('no-csscalc', 'csscalc');    },    jsdom: {      userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X)',    },    media: ['(min-width: 700px) handheld and (orientation: landscape)'],    raw: 'h1 { color: green }',    report: false,    strictSSL: true,    stylesheets: [      'lib/bootstrap/dist/css/bootstrap.css',      'src/public/css/main.css',    ],    timeout: 1000,    uncssrc: '.uncssrc',    userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X)',  };uncss(files, options, function (error, output) {  console.log(output);});/* Look Ma, no options! */uncss(files, function (error, output) {  console.log(output);});/* Specifying raw HTML */var rawHtml = '...';uncss(rawHtml, options, function (error, output) {  console.log(output);});

值得一提的是，UnCSS 还可以与其他 JavaScript 构建系统结合使用，例如： Grunt、Broccoli 或 Gulp，只需要安装特定的库即可。

grunt-uncssgulp-uncssbroccoli-uncss

在 CLI 环境中使用命令如下：

Usage: uncss [options] <file or URL, ...>    e.g. uncss  > stylesheet.cssOptions:  -h, --help                            output usage information  -V, --version                         output the version number  -i, --ignore <selector, ...>          Do not remove given selectors  -m, --media <media_query, ...>        Process additional media queries  -C, --csspath <path>                  Relative path where the CSS files are located  -s, --stylesheets <file, ...>         Specify additional stylesheets to process  -S, --ignoreSheets <selector, ...>    Do not include specified stylesheets  -r, --raw <string>                    Pass in a raw string of CSS  -t, --timeout <milliseconds>          Wait for JS evaluation  -H, --htmlroot <folder>               Absolute paths' root location  -u, --uncssrc <file>                  Load these options from <file>  -n, --noBanner                        Disable banner  -a, --userAgent <string>              Use a custom user agent string  -I, --inject <file>                   Path to javascript file to be executed before uncss runs  -o, --output <file>                   Path to write resulting CSS to

请注意，可以将本地文件路径（由 glob 处理）和 URL 传递给程序。

banner（布尔值，默认值：true）：是否应在已处理 CSS 中的每个文件块之前添加banner。csspath（字符串）：CSS 文件与 HTML 文件相关的路径。 默认情况下，UnCSS 使用 <link rel="stylesheet" href="path/to/file.css"/> 中指定的路径。htmlroot（字符串）：项目根目录所在的位置。 例如，如果 HTML 引用具有根相对 URL 的本地文件，即 href="/css/style.css"则很有用。ignore (string[])：提供不应被 UnCSS 删除的选择器列表。 例如，通过用户与页面交互（悬停、单击）添加的样式，因为 UnCSS 尚无法检测到这些样式。 文字名称和正则表达式模式都可以识别。 否则，可以在特定选择器之前添加注释：

/* uncss:ignore */.selector1 {    /* this rule will be ignored */}.selector2 {    /* this will NOT be ignored */}/* uncss:ignore start *//* all rules in here will be ignored *//* uncss:ignore end */

支持更多配置，包括：ignoreSheets、inject、jsdom、media、raw、report、strictSSL、stylesheets、timeout、uncssrc等参考文末资料。参考资料