这篇文章的作者是我们今天要发表的翻译的第一部分，希望读者提前知道摆脱不必要的CSS是一项艰巨的任务。 如果您阅读此文章是希望找到一个工具，然后运行它，则可以确切地找出可以从项目中安全删除的CSS代码，然后...还有类似的工具，但是必须非常小心地使用它们，因为它们都不用
无法对未使用的CSS问题给出正确的答案。
很容易理解，任何网络开发人员都想使用某种实用程序，运行该实用程序，并删除其报告的不必要的CSS。 几分钟-网站加速了。 但不是那么简单。 该材料的作者认为应该以健康的怀疑态度对待这种工具。 他们都不对开发商撒谎。 这些工具通常根本没有足够的信息来使它们产生可以无条件信任的结果。 但这并不意味着不能使用这些工具。 这并不意味着您不能以任何方式摆脱未使用的CSS。 我们讨论这个。
→
阅读第二部分为什么要清除未使用的CSS？
我相信，可以使用以下示例来描述某些人可能需要摆脱未使用的CSS的主要原因。 假设您使用CSS框架（例如Bootstrap），并且该框架的所有CSS代码都进入了您的项目。 但实际上，项目中仅使用了此类代码的一小部分。 如何摆脱一切不必要的？
我能感觉到处于类似情况的人的感受。 CSS框架通常无法为开发人员提供简便的方法来准确选择适用于特定项目的功能。 同时，将框架的源代码置于理想状态下与某个项目相对应的状态可能需要团队可能没有的经验。 相似的情况本身可能成为搜索框架的原因。
假设您下载了100 KB的CSS。 我会说很多。 （在撰写本文时，
css-tricks.com使用了大约23 Kb的CSS。页面和模板很多。我没有做任何特别的事情来减小CSS的大小。）怀疑您没有使用其中一些代码。 也许您会找到一些证据。 我看到发出警报的原因。 如果您有一个100 Kb的jpg文件，可以使用某种工具将其压缩为20 Kb，那么这很好并且值得做。 但是，如果用CSS完成了类似的事情，那么这将更为重要。 关键是CSS会在页面加载开始时加载，并且是阻止渲染的资源。 JPG文件不是此类资源。
使用Chrome开发者工具进行情况分析
Chrome开发者工具窗口中有一个
Coverage标签。 有了它的帮助，您可以了解在分析页面上实际使用了多少加载的CSS和JavaScript。 例如，现在我去了css-tricks.com。 以下是我在“
Coverage选项卡上看到的
Coverage 。
Chrome开发者工具，“覆盖范围”标签在这里，我看到
style.css文件的70.7％没有使用。 我认为这没有错。 CSS的其余未使用部分在网站的其他页面上使用。 在此站点上，我不使用某些大型样式库。 我自己编写了CSS的每一行，因此我怀疑2/3的CSS在全球范围内不合适。
我假设使用“
Coverage选项卡时，您可以开始“记录”并在网站上四处游荡，观察未使用资源的百分比随着浏览器中显示的不同页面而下降的情况。 但是，不幸的是，刷新页面时，“
Coverage选项卡的内容也会更新。 因此，此工具在确定多个页面上的资源使用百分比时不是特别有用。 也许这不仅是在分析一页应用程序的情况下。
这对我来说很不愉快，但是使用
Coverage标签分析网站却几乎毫无意义。 我所看到的（占70.7％）是一幅可怕的图画，困扰着我，但这种分析并没有给我任何具体的信息，因此，我只能担心自己网站上的错误。
也许对网站的这种分析将使您产生一种想法，即您需要找到并删除已加载但未在项目中使用的CSS代码。
我的主要问题
在查找和删除未使用的CSS时，以下是我最关心的问题。 假设有人查看分析结果并看到未使用的CSS片段。
未使用的CSS代码段他认为：“很好，删除所有不必要的内容！”。 去除了多余的东西，然后发现它根本不是多余的，并且去除它导致整个站点的样式出现大问题。 事情就是这样：您可以完全确定不使用某些CSS选择器，仅当您对以下计划进行研究时：
- 您需要使用“
Coverage选项卡之类的工具来检查网站的每个页面。 - 在这种情况下，您需要执行所有JavaScript代码。
- 必须使用应用程序状态的所有可能选项来完成此操作。
- 并且，此外，您需要使用所用媒体查询的所有可能选项来检查所有这一切。
如果仅检查网站的主页，则不会考虑。 学习所有顶级页面也不认为是真正的测试。 您需要浏览所有页面，在开发人员可能不会立即记住的情况下检查站点，并检查所有边界情况。 否则，一切可能都以删除弹出式窗口中信用卡下拉列表的样式而告终，对于具有禁用帐户的用户，这些用户在宽限期内登录系统以支付新订阅费用并同时拥有有效的礼品卡。
对于自动CSS解析器来说，这样的事情太复杂了。 他们无法完美地执行此类检查，尤其是考虑到不确定情况下的站点分析。 例如，我们谈论的是在不同的浏览器上下文（不同的屏幕尺寸，不同的浏览器功能，不同的浏览器）中研究项目，并考虑到第三方库对站点的影响。
现在，我想举一个例子，说明我刚才谈到的所有问题如何在实践中出现。
PurifyCSS在线
我决定尝试使用
PurifyCSS Online资源优化css-tricks.com。 您可以传递指向它的链接，它会立即产生可供使用的CSS。 我将css-tricks.com“馈送”到该站点，并且可以使用新的CSS代码。 这是我使用此代码后发生的情况。
左侧是css-tricks.com的通常视图。 右边是应用新的“精炼” CSS的结果。 此新代码缺少网站各个页面所需的很多内容PurifyCSS允许您基于许多链接进行分析（很好），但是在css-tricks.com上有成千上万的链接。 就CSS而言，其中许多页面会导致相似的页面，但是在这些页面的每一个上可能都有其他地方未使用的东西。 此外，我感到PurifyCSS没有运行JS代码，因为在“清理”我的CSS之后，使用JavaScript在页面上显示的所有内容都被取消了样式。 甚至伪类的样式
:hover 。
可能，我已经说了足够多的内容，使您理解，我对这种工具的信任如此之小并非偶然。
在项目构建过程中使用PurifyCSS来净化CSS
与在线CSS清洁程序相比，
PurifyCSS可能更多地用作构建项目的工具。 项目文档包含使用Grunt，Gulp和webpack时使用说明。 例如，通过模板处理文件：
var content = ['**/src/js/*.js', '**/src/html/*.html']; var css = ['**/src/css/*.css']; var options = { // CSS . output: './dist/purified.css' }; purify(content, css, options);
这种方法可以提高准确性。 提交进行分析的站点材料可以是一个列表，其中包括每个模板，用于构建页面的每个片段以及每个JavaScript文件。 事实证明，这样的资源列表不容易维护，但可以让您考虑所有可以考虑的因素。 但是，这不适用于某些存储库中的页面内容（例如存储在数据库中的博客文章）以及第三方JavaScript代码，但是在某些情况下这可能并不重要，或者开发人员将能够以某种方式考虑此类资源的CSS需求。
PurifyCSS竞争对手的文档PurgeCSS对PurifyCSS使用的资源处理方法发出警告。 即，我们正在谈论的事实是PurifyCSS可以与任何类型的资源一起使用，而不仅仅是HTML和JavaScript。 PurifyCSS在工作过程中会分析文件中的所有单词，并将它们与CSS代码中的选择器进行比较。 每个单词都被视为选择器。 也就是说-许多选择器可能被错误地识别为在网站上使用。 例如，在文件的文本内容中，在常规句子中，可能存在与某个CSS选择器相对应的单词。
PurifyCSS值得记住。 该工具使用一种非常简单的算法在站点资料中搜索CSS选择器。 一方面，这是一个明智的想法，另一方面，这是非常危险的。
未使用的CSS服务
进行工具的手动调整，以便该工具可以分析每个页面，以便他从所有可能的角度进行检查，这当然是无聊的例程。 此外，此类工作应每天进行，因为随着项目的发展，有关现场的分析信息应使用新数据进行更新。 有一项在线服务称为
UnusedCSS 。 他独立地绕过网站页面，从而使开发人员免去了许多单调的工作。 该服务足以将单个链接转移到站点。
我注册了此服务的付费订阅，并使用它分析了css-tricks.com。 我必须承认，在查看结果之后，我觉得它们看上去比以前看到的要准确得多。
使用UnusedCSS分析css-tricks.com。 该报告说，该网站使用了93％的已加载CSS代码。 对我来说，这似乎很接近事实，因为我手动为该站点编写了所有CSS代码此外，该服务还允许您下载带有清除CSS代码的文件，并提供管理此文件内容的功能。 例如，这是启用和禁用开发人员希望或不希望添加到CSS代码的选择器。 假设开发人员看到了一个类名，根据UnusedCSS的说法，该类名在站点上是不需要的，但是开发人员肯定知道没有这个类名就无法做到。 结果，可以将被错误地识别为不必要的代码标记为必要。 UnusedCSS的其他功能包括使用前缀和删除重复的选择器。
我非常喜欢UnusedCSS给我比其他工具更准确的结果这一事实。 但是，此服务生成的数据中有太多“噪音”，而且我还不知道如何在定期重复的构建项目并将其新版本投入生产的过程中包括UnusedCSS。
→
阅读第二部分亲爱的读者们！ 您是否遇到过在项目中使用未使用的CSS代码的问题？
