vscode 查找css_uncss：查找未使用CSS

柔情只为你懂 2023-02-22 03:33 26阅读 0赞

vscode 查找css

You know what's better than adding features to a website or app, from a code perspective?  Removing stuff you don't need.  Whether it be code, images, or dependencies, getting rid of the crap stale code is like the first sip of a big glass of wine after a long day of stressful work.  Running a directory of images through ImageOptim is a euphoric experience, am I right?  What if there was a tool, however, which would allow you to find unused CSS for a given website?  There is, and it's called [`uncss`][uncss], a NodeJS powered utility.  Let's take a look at how `uncss` works!

从代码的角度来看，您知道有什么比向网站或应用程序添加功能更好的方法吗？ 删除不需要的东西。 无论是代码，图像还是依赖项，都摆脱了  废话  经过一整天的紧张工作后，陈旧的代码就像喝了一大杯酒。 通过ImageOptim运行图像目录是一种愉快的体验，对吗？ 但是，如果有一个工具可以让您找到给定网站的未使用CSS，该怎么办？ 有一个叫做[`uncss`][uncss]支持的实用程序。 让我们看看`uncss`是如何工作的！

A basic usage of `uncss`'s command line tool would be:

`uncss`命令行工具的基本用法是：

uncss https://davidwalsh.name > styles.css

The output of this execution is a stylesheet featuring only the *used* CSS rules -- unused rules are removed.  So how does `uncss` work?  I'll let them tell you how:

此执行的输出是仅包含已*使用的* CSS规则的样式表-删除未使用的规则。 那么`uncss`如何工作？ 我会让他们告诉您如何：

> 1.  The HTML files are loaded by [PhantomJS][] and JavaScript is executed.
>     
>     HTML文件由[PhantomJS][]加载并执行JavaScript。
> 2.  Used stylesheets are extracted from the resulting HTML.
>     
>     使用过的样式表将从生成HTML中提取。
> 3.  The stylesheets are concatenated and the rules are parsed by [css-parse][].
>     
>     样式表被连接起来，规则由[css-parse解析][css-parse] 。
> 4.  `document.querySelector` filters out selectors that are not found in the HTML files.
>     
>     `document.querySelector`过滤掉HTML文件中找不到的选择器。
> 5.  The remaining rules are converted back to CSS.
>     
>     其余规则将转换回CSS。

Like just about every NodeJS-based utility, you can also take advantage of its JavaScript API.  Here's an example usage:

就像几乎每个基于NodeJS的实用程序一样，您也可以利用其JavaScript API。 这是一个示例用法：

There's no arguing that years of maintaining, adding, and removing from a site will add excess code to the codebase.  That excess code comes at the cost of users who have load the extra code, so eliminating the dead code is important.  Give `uncss` a try -- it's an easy to use, automated helper to keep your codebase as tight as possible!

毋庸置疑，多年维护，添加和删除站点会在代码库中添加过多的代码。 多余的代码将以负担额外代码的用户为代价，因此消除无效代码非常重要。 尝试一下`uncss` －这是一个易于使用的自动化助手，它可以使您的代码库尽可能地紧凑！

> 翻译自: [https://davidwalsh.name/uncss][https_davidwalsh.name_uncss]

vscode 查找css

[uncss]: https://github.com/giakki/uncss
[PhantomJS]: https://github.com/Obvious/phantomjs
[css-parse]: https://github.com/reworkcss/css
[https_davidwalsh.name_uncss]: https://davidwalsh.name/uncss