怎么优化优化css动画_4种审核和优化CSS的工具

一旦您的网站开始发展，您的代码也会随之增长 。 随着代码的扩展，CSS可能突然变得难以维护，并且最终可能会覆盖另一CSS规则。 这使事情变得复杂，您可能最终会遇到很多错误。

如果您遇到这种情况，该是时候审核站点CSS了 。 审核CSS将使您能够识别未优化的CSS部分 。 您还可以通过消除会降低网站性能的代码行来减少样式表文件的大小。

这里有5个很好的工具，可帮助您审核和优化CSS。

Type-o-matic是一个Firebug插件，用于分析网站中使用的字体。 该插件在表格中提供可视化报告，其中包含字体属性，例如字体系列，大小，粗细，颜色以及在网页中使用字体的次数。 通过报告表，您可以轻松地优化字体使用，删除不必要的字体或组合过于相似的样式。

CSS Lint是一种整理工具，可以根据特定的参数分析CSS语法，以解决 CSS 的性能，可访问性和兼容性 。 您会对结果感到惊讶，并期望CSS中出现许多警告。 但是，这些错误最终将帮助您修复CSS语法并提高其效率。 此外，您还将成为更好CSS编写者。

CSS ColorGuard是一个相对较新的工具。 它作为Node模块构建，可在所有平台上运行：Windows，OS X和Linux。 CSS ColorGuard是一个命令行工具，如果您在样式表中使用相似的颜色，它将通知您。 例如#f3f3f3非常接近#f4f4f4 ，因此您可能要考虑合并两者。 CSS ColorGuard是可配置的，您可以设置相似性阈值以及希望工具忽略的颜色。

CSS Dig是Python脚本，可以在您的计算机上本地工作。 CSS Dig将在您CSS中进行彻底检查。 它将读取并合并属性，例如，所有背景色声明都将位于背景部分下方。 这样，在尝试标准化CSS语法时，您可以轻松地根据报告做出决策，例如，您可以使用以下颜色声明在各种样式中找到颜色。

color: #ccc;
color: #cccccc;
color: #CCC;
color: #CCCCCC;

这些颜色声明执行相同的操作。 您也可以选择#ccc或大写#CCC作为标准。 CSS Dig也可以为其他CSS属性公开这种冗余，并且您将能够使代码更加一致。

翻译自: https://www.hongkiat.com/blog/audit-optimize-css/