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

背景

为网站写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.com
http://m.xiaohuawanpian.com/xiaohua/1.html
http://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.com
Parsing http://m.xiaohuawanpian.com/xiaohua/1.html
Parsing 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 declaration
s
{.joke-section .joke-toolbar .error-tip} AND {.joke-section .joke-toolbar .fontL
arge} 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 declaratio
ns
{.joke-section} AND {.tab-link>*} share 3 declarations
{.joke-section .joke-text .detail-link} AND {.visit-joke-list .visit-title} shar
e 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