利用css-redundancy-checker去除冗余、无用、废弃的css样式代码

2017-03-21 08:20:30来源:CSDN作者:gorgle人点击

背景

为网站写CSS样式的时候,经常会遇到CSS样式的修改或者网页设计的改变,而这些网页在经过无数次的修改之后,可能有些样式已经用不到了,css文件中可能存在着一些没用的CSS代码。这些无用的CSS代码浪费了一些服务器空间和带宽消耗,也可能为下一次网页改版埋下一个隐患。利用css-redundancy-checker可以有效为我们清除这些冗余的css样式代码。

css-redundancy-checker简介

css-redundancy-checker是一个ruby脚本,可以从官网https://code.google.com/archive/p/css-redundancy-checker/ 下载到。如果无法访问googlecode,github上也有好多fork,可以在github上搜索css-redundancy-checker即可找到。

css-redundancy-checker使用

环境准备(我用的是win7 64位)

  • 安装Ruby:http://rubyinstaller.org/downloads/ 我用的是Ruby 2.3.3 (x64),建议把ruby加入到PATH
  • 安装RubyGems: https://rubygems.org/pages/download 下载解压后执行:

    ruby setup.rb install
  • 安装DEVELOPMENT KIT:在 http://rubyinstaller.org/downloads/ 下载相应的版本解压后执行:

    ruby dk.rb init
    ruby dk.rb install
  • 安装hpricot
    以管理员身份在cmd窗口执行

    gem install hpricot

使用

css-redundancy-checker.rb脚本有2个参数:第一个参数是css文件路径;第二个参数是文件夹路径,包含使用了该css样式的html文件,或者是一个.txt文件,每行是一个使用了该css样式的网页地址,我测试使用的txt内容如下:

http://m.xiaohuawanpian.comhttp://m.xiaohuawanpian.com/xiaohua/1.htmlhttp://m.xiaohuawanpian.com/xiaohua/youmo/http://m.xiaohuawanpian.com/xiaohua/index_2.html

在css-redundancy-checker的目录下执行(路径参数请做相应修改):

ruby css-redundancy-checker.rb mobile.css url.txt

输出:

Parsing all html files within url.txt for selectors in mobile.css...-------------Parsing http://m.xiaohuawanpian.comParsing http://m.xiaohuawanpian.com/xiaohua/1.htmlParsing http://m.xiaohuawanpian.com/xiaohua/youmo/Parsing http://m.xiaohuawanpian.com/xiaohua/index_2.html-------------The following selectors are NOT used in of the html files in url.txt-------------.joke-section .joke-toolbar .bad-item.disabled .item-text.joke-section .joke-toolbar .disabled.joke-section .joke-toolbar .error-tip.joke-section .joke-toolbar .fontLarge.joke-section .joke-toolbar .good-item.disabled .item-text.joke-section .joke-toolbar .message-tip

其中.joke-section部分是在html中没有使用到的css样式。

css-redundancy-checker的不足之处

  • 不支持https
  • 无法检测在JavaScript中引用的css样式,这个要特别注意,以免误删

另外,我在这次优化css代码过程还发现一个比较好玩的工具:csscss,官网https://github.com/zmoazeni/csscss ,这也是一个Ruby脚本,它的功能就是检测具有相同属性的css样式,你可以据此对css代码进行重构,从而使代码更加紧凑。下面代码片段是我使用csscss的输出:

{.joke-detail .more-link} AND {.joke-list .more-link} share 10 declarations{.classify-list>li} AND {.subLinks-tab .container .links>li} share 7 declarations{.joke-section .joke-toolbar .error-tip} AND {.joke-section .joke-toolbar .fontLarge} share 6 declarations{.classify-list>li} AND {.joke-section} share 5 declarations{header .header-nav} AND {header .header-nav .nav-icon} share 4 declarations{.joke-section} AND {.subLinks-tab .container .links>li} share 4 declarations{.classify-list>li} AND {.tab-link>*} share 4 declarations{.joke-section .joke-toolbar>*} AND {.tab-link>*} share 4 declarations{.subLinks-tab .container .links>li} AND {.tab-link>*} share 3 declarations{header .header-nav .nav-icon} AND {header .location a:after} share 3 declarations{.joke-section} AND {.tab-link>*} share 3 declarations{.joke-section .joke-text .detail-link} AND {.visit-joke-list .visit-title} share 3 declarations{.joke-section .joke-toolbar} AND {.tab-link} share 3 declarations{header .location a} AND {header .location span} share 3 declarations{.classify-list>li}, {.joke-detail .more-link} AND {.joke-list .more-link} share 3 declarations

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台