10 最佳的格式化和优化 CSS 文件的工具

CSS文件的格式化和优化对于网页开发人员来说再也不是一个头疼的问题，因为有这些经过精心挑选的工具的帮助！

自从它的诞生以来，层叠样式表（CSS）已被广泛用于定义网页的视觉效果。它们包括颜色、布局、动画和字体的定义。由于独立于HTML，CSS允许您轻松地适应不同类型设备上的网页展示，而无需改变页面的内容。

CSS被称为层叠样式表，是因为属性值是根据内容层次结构应用的。子元素可以从父元素继承或覆盖属性值。这些功能是通过基于层次作用域的模型提供的。这个模型的问题是，如果没有正确使用，它可能严重影响到website’s performance。

没有人喜欢一个慢吞吞的网站。这就是为什么需要CSS优化的原因，以及一种专门设计用于尽可能使CSS文件整洁和快速的新型工具。

CSS optimization可以通过多种方式来完成：可以减小CSS文件的大小，可以进行清理，可以进行测试或验证正确性，可以进行整理，可以进行格式化以理解其代码，并且一般而言，可以进行调整以实现更好的用户体验。我们为每个任务选择了最佳工具。

# CSS调整工具

CSS Minify

CSS Minify是一个简单的工具，用于进行CSS缩小：即将美化、可读、格式良好的CSS去除所有间距、缩进、换行和注释。生成的缩小后的CSS可以成功使用，而无需这些元素。此外，缩小使得CSS更难以阅读，阻止了代码盗窃者窃取您辛勤工作的样式表。

当您缩小代码时，建议保留一个美化（非缩小）版本，因为将来您可能需要阅读它，以便进行更改。

Topcoat

Topcoat不是一个优化CSS的工具。相反，它是一个专为速度而设计的开源CSS库。它是Adobe为Brackets、Edge Reflow开发的设计语言的后代。

Topcoat包括PSD和许多其他设计工件，以及一系列简单干净的SVG图标和样式指南。它还提供基准测试工具和时尚的Adobe Source Sans Pro字体系列。

代码美化器

Code Beautifier基于流行的开源CSS解析器和优化器CSS Tidy。它允许您将CSS代码粘贴到文本区域进行处理，或从URL获取CSS代码。完成工作后，它会显示优化后的代码，以及所做更改的列表。您可以将修改后的代码复制到剪贴板上，或将其保存到文件以供以后使用。

该工具提供了一个重要且全面的选项列表，可让您调整其结果以满足您的偏好。例如，它提供了五个压缩选项，从低压缩到最高压缩。其他选项可让您指定排序、其他形式的压缩、删除不必要的项目等。

CSS Nano

另一个CSS缩小工具是CSS Nano。这个工具基于一个名为PostCSS的用于用JavaScript转换样式的工具。由于该工具的插件架构，CSS Nano的创建者能够将其建立为由具有受限功能的小模块组成的工具。

默认情况下，CSS Nano只会对您提供的CSS文件进行安全优化。但是该工具还提供了将压缩推向极限的选项。CSS的工作方式仍然相同，但是其中的不必要的空白将被删除。此外，它的标识符将被压缩，不必要的定义将被完全清除。

# CSS清理工具

Dirty Markup（脏代码）

Dirty Markup恰好与代码压缩器相反：它接受任何你输入的代码并将其清理，使其易于阅读 – 前提是它是有效的CSS代码。生成的代码完全美化。

Dirty Markup的创建者表示，使用他们的工具美化了近10亿行代码（不仅包括CSS，还包括HTML和JavaScript）。

Dust-Me Selectors（选择器灰尘）

Dust-Me Selectors 被创建用于扫描网站并找到未使用的CSS选择器，以便删除它们并减小代码的大小。它可以作为Firefox和Opera的附加组件使用。

Dust-Me Selectors可以在单个页面上工作，也可以爬取整个网站地图，显示找到的所有样式表和选择器的详细信息，并将它们组织为已使用和未使用。Firefox版本能够在浏览时自动扫描页面。需要注意的是，当这样做时，如果页面发生变化，突变事件可能会触发额外的扫描。

CSS Lint（CSS线上工具）

CSS Lint提供了一个简约的界面：只有一个大文本框，您可以在其中粘贴您的CSS代码进行“linting”。它不会告诉您linting过程会对代码做什么，但页面顶部的警告消息告诉您结果会让您感到痛苦 – 也会帮助您编写更好的代码。

CSS Lint根据一组预定义的规则验证代码的语法。通过这样做，它可以检测潜在的低效和错误。通过一些自定义设置，CSS Lint使您可以选择要执行的规则集。

# CSS测试/验证工具

CSS压力测试（CSS Stress Test）

CSS Stress Test作为一个书签工具（一个小的JavaScript代码片段）应用于任何给定网页的CSS进行压力测试。该工具索引了CSS代码中的所有元素和类。然后，它通过逐个删除类来开始压力测试，并计时滚动页面所需的时间。

如果在删除选择器时页面滚动所需的时间大大减少，则该选择器表示一个可能有问题的区域，应该删除或更正。该工具特别适用于精美的CSS3代码，该代码允许使用圆角、不透明度、文本阴影和盒子阴影。所有这些效果都可以在CSS3中完成，而无需使用图像切割、特殊脚本或添加其他元素。

但是CSS3可能会导致问题：单个属性可能导致可见的重绘和页面滚动问题。这就是CSS压力测试工具发挥作用的地方。

CSS验证服务

CSS Validation Service用于验证级联样式表和（X）HTML与样式表。该工具检查了所有版本的CSS中定义的属性。要验证页面或CSS文件，您只需输入其URI（统一资源标识符）并设置一些基本选项，如配置文件（要检查的CSS类型）、目标设备、要显示的警告以及如何处理供应商扩展相关的问题（显示错误或警告）。

设置完毕后，点击“检查”按钮并等待结果。最终报告将显示一个详尽的错误和警告列表，其中包括无效属性、语法错误、未知的供应商扩展等许多问题，您应该在CSS中进行修正以进行调整。报告还将显示您页面中的所有有效CSS代码。

BackstopJS 3

BackstopJS 3自动化响应式Web用户界面的视觉回归测试。它通过比较一系列DOM截图来完成其工作。它提供了一个令人兴奋的功能列表：包括浏览器内报告，打印和屏幕的布局设置，以及其他一些特定功能，如显示过滤和参考/测试/视觉差异检查。

使用Puppeteer和ChromyJS脚本，BackstopJS 3可以模拟用户交互，并能够使用Chrome Headless渲染测试。为了消除cross-platform rendering problems，它还集成了docker渲染。该工具可以全局运行或作为一个独立包在本地运行，并且可以与CI和源代码控制良好地配合使用。BackstopJS 3非常易于使用：只需三个命令，您就可以走得很远。

结论

我希望以上的CSS工具能帮助您优化Web应用程序的CSS文件，以获得更好的性能。如果您对学习高级CSS感兴趣，请查看这个brilliant course。