根据html除去多余css样式在线,利用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