CSS技巧:清理无用的CSS样式

shellstonelei

shellstonelei

2016-02-17 04:48

岁数大了,QQ也不闪了,微信也不响了,电话也不来了,但是图老师依旧坚持为大家推荐最精彩的内容,下面为大家精心准备的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技巧:清理无用的CSS样式,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

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

Page Speed

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

CSS技巧:清理无用的CSS样式,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

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

CSS Redundancy Checker

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

CSS技巧:清理无用的CSS样式,PS教程,图老师教程网

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.

展开更多 50%)
分享

猜你喜欢

CSS技巧:清理无用的CSS样式

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
CSS技巧:清理无用的CSS样式

清理无用的CSS样式的几个有用工具

Web开发
清理无用的CSS样式的几个有用工具

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

清理无用的CSS样式比较有用的几个工具

Web开发
清理无用的CSS样式比较有用的几个工具

CSS样式表使用的技巧

Web开发
CSS样式表使用的技巧

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

浅谈CSS样式优化心得技巧

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
浅谈CSS样式优化心得技巧

CSS样式表常用技巧

Web开发
CSS样式表常用技巧

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

美图秀秀教你制作温馨风格签

美图秀秀教你制作温馨风格签

Logo设计须遵守的12条原则

Logo设计须遵守的12条原则
下拉加载更多内容 ↓