怎样清算无用的CSS样式，你晓得吗？

我们在编写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。

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开发过网站，但愿使用该软件的童鞋可以帮助确定一下这一点）。

小结：

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

别的，平常我们将整个网站的样式写入一个或多个样式文件中，然后在页面中全部调取或者分模块调取，在52CSS.com的网站样式文件组织方面的文章中，有过介绍。

那么某个CSS文件中的样式大概在某个页面中确实没有用到但是在其它的页面中被用到了，所以使用这些工具检测CSS文件中余外的样式的时候，需要保持必然的慎重，清除样式大概会影响到其它的页面

所以 page speed供给的检查结果只适用于单个页面，不适合整个网站，而使用Dust-Me或CSS Redundancy Checker的时候可以对整个网站或者网站的多个页面同时检查，这样大概能幸免十拿九稳。

感激大家的阅读，但愿大家收益很多。

本文转自： https://blog.csdn.net/wuchengzhi82/article/details/8669052

引荐教程：《CSS教程》

以上就是怎样清算无用的CSS样式，你晓得吗？的具体内容，更多请关注百分百源码网其它相关文章！