检测删除沉余无用的CSS样式文件代码

在网页制作和模板仿制中仿制别人的网站html页面DIV+CSS代码中，有时候我们只需要整个网站的某一个页面，但是下载的CSS文件一般都包括了整站的样式代码会有很多沉余无用失效的样式代码，如何清理这些无用的CSS样式代码以及做到CSS样式文件减肥加快网页访问速度呢?

删除无用多余的css代码

去除无用样式代码就是删除CSS样式文件中没有用到的多余沉余的CSS样式代码，这样有助于代码的优化，减少不必要样式代码的加载。

减小CSS文件体积的好处！

1、节约网络传输量和带宽占用

2、节约服务器空间占用

3、节约服务器的处理压力

4、加快网站页面的渲染显示速度

在网站的成长成型更新壮大的过程中，页面的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%。

CSS Usage

css usage是一个基于firebug的firefox扩展，可以用来查看页面中的CSS的使用情况，可以清楚的查看css文件中所有的规则在你的网站中的 真实的使用情况。可以查看一个网站中多个页面中的css使用情况——这个很好，可以看到CSS的在网站中的全局使用情况

gulp-uncss

gulp-uncss 是gulp的一个插件。gulp是基于nodejs，理所当然需要安装nodejs

UnCSS 是一个用于移除脚本中无用 CSS 的工具。它可以审查多个文件，也可以审查由 JavaScript 注入的 CSS。

Page Speed

Page Speed最初是Google内部使用的改进网页设计的工具——它整合在Firefox的著名插件Firebug中。当用户运行Page Speed，可以立即获得如何改进网页载入速度的建议。

Page Speed能自动为用户优化图像，提供可以发布在网页上的压缩图片，它也能识别JavaScript和CSS载入问题，帮助开发者减少浏览者等待网页展示的时间。

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

结束语使用注意事项

当然肯定还有很多其它的工具这里没有提到，如果大家有所了解，可以留言分享出来哦。

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