清理CSS样式的工具介绍

项目正在逐渐形成，经过几个版本的修改后我们很多样式都会用不到了，如果不删掉这些无用的样式就会浪费我们的服务器空间和带宽消耗，同时特加大了我们的维护成本，那么有哪些方法可以清理css样式呢？现在我们就去看看清理CSS样式的工具介绍吧。

Dust-Me selectors

Dust-Me是一个很有用也很好用的Firefox插件，它可以分析到你的页面中调用的所有CSS文件并分析那些在页面中没有被用到。

• 支持本地和远程样式文件，包括使用<link>标签、<?xml-stylesheet?>处理指令、@import语句等方式引入的样式文件；(但是不支持页面中的<style>块和内联样式)
• 支持IE条件注释中引入的样式文件；
• 可以检查一个页面，也可以检查整个网站；
• 支持CSS1选择器、大部分CSS2和CSS3选择器；
• 理解通用的CSS hack，比如 “* html #fuck-ie”将会被认为是”html #fuck-ie”；
• 支持Firefox 3.5和Firefox 3.0，事实上得益于FF 3.5的js引擎的改进，FF 3.5中的性能比FF 3.0要高50%。

安装：点击这里。同时，你可以下载该项目的源代码，了解更多请访问 Dust-Me selector官方页面。

Page Speed

Page Speed是Google提供的一个前端性能分析工具，有些类似于YSlow，但是提供了一些比较个性且很有用的工具，比如Remove unused CSS：

Page Speed和YSlow一样依赖Firebug，了解详情和安装请访问这里。

CSS Redundancy Checker

CSS Redundancy Checker是一个免费的在线应用，可以检查所有的使用某个CSS文件的页面中无用的样式。可以同时检查某一个样式在多个页面中的使用情况。该工具的不足是虽然一次能检查多个HTML页面，但每次只能检查一个CSS文件，而且还要手动输入：

IntelliJ IDEA

IntelliJ IDEA这是一个颇强大的IDE，类似于DreamWeaver，不过在国内用的不多。该软件包括一个即时代码分析工具(On-the-fly Code Analysis)，可以分析CSS文件中未用到的class和id。

Expression Web

Expression Web作为微软的新一代网站开发工具，还是有很多人使用的，其CSS Report功能可以检查未用到需要被清除的CSS（我的确没有使用EW开发过网站，希望使用该软件的童鞋可以帮忙确认一下这一点）。

结语

当然可能还有其它的某些工具这里没有提到，如果大家有所了解，可以与大家分享。

另外，通常我们将整个网站的样式写入一个或多个样式文件中，然后在页面中全部调用或者分模块调用，那么某个CSS文件中的样式可能在某个页面中的确没有用到但是在其它的页面中被用到了，所以使用这些工具检测CSS文件中多余的样式的时候，需要保持一定的谨慎，清除样式可能会影响到其它的页面，所以page speed提供的检查结果只适用于单个页面，不适合整个网站，而使用Dust-Me或CSS Redundancy Checker的时候可以对整个网站或者网站的多个页面同时检查，这样可能能避免万无一失。

PS:Thanks to Knowledge Capsules’s work very much.

清理CSS样式的工具介绍就到这里了，你学会了吗？如果你还想了解更多关于css的内容就请关注我们吧。

原文链接:https://js.aizhan.com/web_authoring/css/6723.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有