« »

  在网上看到这篇文章,介绍五个CSS样式清理工具,原作者地址未知,整理了一下收藏:

  在我们写css样式的时候,页面经历几个版本的修改之后,可能有些样式已经用不到了,或许将某些样式更名了而原来的忘了删除,总之页面中可能存在着一些无用的样式。这些无用的浪费了一些服务器空间和带宽消耗,也会增大我们的维护成本。那么有没有一些办法来清理那些无用的样式呢?今天就让我们来了解一下几个比较有用的工具。

  Dust-Me selectors

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

  安装http://addons.mozilla.org/zh-CN/firefox/addon/5392。同时,你可以下载该项目的源代码,了解更多请访问Dust-Me selector官方页面。

  Page Speed

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

  Page Speed和YSlow一样依赖Firebug,了解详情和安装请访问这里(http://code.google.com/speed/page-speed/)。

  CSS Redundancy Checker

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

  IntelliJ IDEA

  IntelliJ IDEA(http://www.jetbrains.com/idea/features/html_css_editor.html)这是一个颇强大 的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的时候可以对整个网站或者网站的多个页面同时检查,这样可能能避免万无一失。

日志信息 »

该日志于2009-10-15 17:37由 5JUN 发表在网页设计分类下, 你可以发表评论。除了可以将这个日志以保留源地址及作者的情况下引用到你的网站或博客,还可以通过RSS 2.0订阅这个日志的所有评论。

相关日志 »

  • 暂无相关日志

2 Responses to “五个CSS样式清理工具”

  1. wzh :

    嗯,感谢博主的分享!不错的东东

    2009年12月10日于07:01 [回复]
  2. accecc :

    有时间用用

    2009年12月18日于23:08 [回复]

Leave a Reply

:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!: