CSSCheckStyle

Catalog

• <a href="https://github.com/wangjeaf/CSSCheckStyle#description">Description</a>
• <a href="https://github.com/wangjeaf/CSSCheckStyle#installation">Installation</a>
• <a href="https://github.com/wangjeaf/CSSCheckStyle#editor-plugins">Editor plugins</a>
• <a href="https://github.com/wangjeaf/CSSCheckStyle#demo-parse---fix---compress">Demo (parse -> fix -> compress)</a>
• <a href="https://github.com/wangjeaf/CSSCheckStyle#demo-parse---check">Demo (parse -> check)</a>
• <a href="https://github.com/wangjeaf/CSSCheckStyle#usage">Usage</a>
• <a href="https://github.com/wangjeaf/CSSCheckStyle#config-file">Config File</a>
• <a href="https://github.com/wangjeaf/CSSCheckStyle#plugin-development">Plugin Development</a>
• <a href="https://github.com/wangjeaf/CSSCheckStyle#unit-test">Unit Test</a>
• <a href="https://github.com/wangjeaf/CSSCheckStyle#rulesplugins">Rules(Plugins)</a>

Description

<pre> @description { destination: 一个CSS的检查、修复、压缩、分浏览器终极压缩的工具集; website: <a href="http://www.csscheckstyle.com">CKstyle官方网站</a>; blog: <a href="http://fed.renren.com/archives/1427">《CSSCheckStyle——CSS的解析、检查、修复和压缩》</a>; reference: <a href="http://fed.renren.com/archives/1212">《人人FED CSS编码规范》</a>; export-tools: ckstyle(检查check/修复fix/压缩compress) docs: <a href="https://github.com/wangjeaf/CSSCheckStyle-docs">https://github.com/wangjeaf/CSSCheckStyle-docs</a> language: python; } </pre>

Installation

easy_install https://github.com/wangjeaf/CSSCheckStyle/archive/master.tar.gz

另外，也可以将此压缩包下载到本地，通过 easy_install xxxx.tar.gz完成安装

Editor plugins

目前已经为 VIM / Sublime Text 2 / Notepad ++ 开发了ckstyle插件，可供使用。

不同编辑器实现的命令调用方式如下：

• VIM（command命令）
• Sublime Text 2（快捷键Ctrl+F1，右键菜单项，tools菜单项）
• notepad++（快捷键Ctrl+F1，宏菜单项）
• EditPlus（工具菜单项，快捷键）

各编辑器插件均实现了以下几种操作：

• Fixstyle（自动修复CSS代码）
• FixstyleSafe（安全模式下自动修复CSS代码，目前仅排除合并规则集）
• FixstyleSingleLine（修复成单行模式）
• CkStyle（检查代码问题）
• CssCompress（压缩CSS代码）

所有编辑器插件都在 editor-plugins 目录下。

目前插件的功能还比较初级，热烈欢迎熟悉插件开发的同学来贡献编辑器插件。

如果插件使用过程中出现任何问题，请在github上报bug，或者微博 @wangjeaf

Demo (parse -> fix -> compress)

说明

以下是通过自动fix，自动排序，自动合并，自动压缩以后的代码示例。

结果来自plugins/.py中的fix方法，以及entity/.py的compress方法。

对于fix，目前只做了以下几个plugin的fix：

• FEDHexColorShouldUpper
• FEDUseSingleQuotation
• FEDCombineInToOne (通过combiner的方式灵活扩展，目前只做了MarginCombiner)

其他的fix只需要在对应的plugin文件中添加fix方法，即可实现fix和压缩

此Demo执行的命令： ckstyle compress -p test.css

before

.test1 {
    width: 100px;
    height: 200px;
    *display: none;
    border: 1px solid #FFFFFF;
    _display: inline-block;
    margin: 10px;
    margin-top: 20px;
}

.test2 {
    *display: none;
    width: 100px;
    border: 1px solid #FFF;
    height: 200px;
    _display: inline-block;
    margin: 20px 10px 10px;
}

.test3 {
    margin: 0 10px 20px;
    border: 1px solid #fff;
    width: 100px;
    height: 200px;
    *display: none;
    _display: inline-block;
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
}

.test4 {
    border: 1px solid #ffffff;
    *display: none;
    width: 100px;
    height: 200px;
    margin: 10px;
    _display: inline-block;
    margin-top: 20px;
}

.test5 {
    margin: 10px;
    margin-top: 20px;
    width: 100px; *display: none; height: 200px;
    border: 1px solid #ffffff;
    _display: inline-block;
    margin-left: 10px;
}

fixstyle

fixstyle 自动修复以后的代码：

.test1,
.test2,
.test3,
.test4,
.test5 {
    *display: none;
    _display: inline-block;
    width: 100px;
    height: 200px;
    margin: 20px 10px 10px;
    border: 1px solid #FFF;
}

fixstyle --singleLine 自动修复后的代码：

.test1,
.test2,
.test3,
.test4,
.test5 { *display: none; _display: inline-block; width: 100px; height: 200px; margin: 20px 10px 10px; border: 1px solid #FFF; }

after compress

本压缩工具的压缩结果（属性排列顺序已经按照推荐顺序优化），压缩率： 140 / 766 = 18.3%：

.test1,.test2,.test3,.test4,.test5{*display:none;_display:inline-block;width:100px;height:200px;margin:20px 10px 10px;border:1px solid #FFF}

<a href="http://www.cssoptimiser.com">CSS Optimizer</a> 压缩结果，压缩率：310 / 766 = 40.5%：

.test1,.test2,.test3,.test4,.test5{width:100px;height:200px;*display:none;_display:inline-block}.test1,.test3,.test4,.test5{border:1px solid #fff}.test1,.test4,.test5{margin:10px;margin-top:20px}.test2{border:1px solid #FFF}.test2,.test3{margin:20px 10px 10px}.test3{margin:0 10px 20px}.test5{margin-left:10px}

YUI Compressor 压缩结果，压缩率：662 / 766 = 86.4%：

.test1{width:100px;height:200px;*display:none;border:1px solid #fff;_display:inline-block;margin:10px;margin-top:20px}.test2{*display:none;width:100px;border:1px solid #FFF;height:200px;_display:inline-block;margin:20px 10px 10px}.test3{margin:0 10px 20px;border:1px solid #fff;width:100px;height:200px;*display:none;_display:inline-block;margin-top:20px;margin-left:10px;margin-right:10px;margin-bottom:10px}.test4{border:1px solid #fff;*display:none;width:100px;height:200px;margin:10px;_display:inline-block;margin-top:20px}.test5{margin:10px;margin-top:20px;width:100px;*display:none;height:200px;border:1px solid #fff;_display:inline-block;margin-left:10px}

Demo (parse -> check)

此处演示的是代码风格检查功能。

所有的检查项都来自于plugins/*.py的check方法

原始CSS代码

.test1 ul li a {
width:10px;
color:#ffffff;
    -webkit-border-radius:3px;
-moz-border-radius : 3px;
border-radius:3px
}

检查与修改过程

检查结果 1：

<pre> [ERROR] 1. use less tag in ".test1 ul li a" [ERROR] 2. css3 prop "-webkit-border-radius" missing some of "-webkit-,-moz-,-o-,std" in ".test1 ul li a" [ERROR] 3. css3 prop "-moz-border-radius" missing some of "-webkit-,-moz-,-o-,std" in ".test1 ul li a" [ERROR] 4. css3 prop "border-radius" missing some of "-webkit-,-moz-,-o-,std" in ".test1 ul li a" [WARN] 5. do not simply use 1,2,3 as selector, in ".test1 ul li a" [WARN] 6. color should in upper case in ".test1 ul li a" [WARN] 7. each rule in ".test1 ul li a" need semicolon in the end, "border-radius" has not [LOG] 8. css3 prop "-moz-border-radius" should align to right in ".test1 ul li a" [LOG] 9. css3 prop "border-radius" should align to right in ".test1 ul li a" [LOG] 10. should have 4 spaces before "width" in ".test1 ul li a" [LOG] 11. should have 4 spaces before "color" in ".test1 ul li a" [LOG] 12. should have (only) one "space" before value of "-webkit-border-radius" in ".test1 ul li a" [LOG] 13. should not have "space" after "-moz-border-radius" in ".test1 ul li a" [LOG] 14. should have (only) one "space" before value of "border-radius" in ".test1 ul li a" </pre>

第一次修改后：

.test-special-word a.a-class {
    width:10px;
    color:#FFFFFF;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
         -o-border-radius: 3px;
            border-radius: 3px;
}

再次检查：

<pre> [ERROR] 1. should not put "HTMLtag" and ".class" together in ".test-special-word a.a-class" [WARN] 2. replace "#FFFFFF" with "#FFF" in ".test-special-word a.a-class" [LOG] 3. should have (only) one "space" before value of "width" in ".test-special-word a.a-class" [LOG] 4. should have (only) one "space" before value of "color" in ".test-special-word a.a-class" </pre>

符合规范的最终代码

.test-special-word .a-class {
    width: 10px;
    color: #FFF;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
         -o-border-radius: 3px;
            border-radius: 3px;
}

Usage

关于ckstyle的子命令及命令行参数说明

通过 ckstyle -h / ckstyle --help可以查看命令的帮助，例如： ckstyle compress -h ckstyle compress --help

ckstyle(检查)/fixstyle(自动修复)/compress(压缩，同名工具csscompress) 三个工具的命令行参数基本相同

注意：从 CSSCheckStyle1.1 以后开始，ckstyle的命令调整为子命令模式，即：

• ckstyle --> ckstyle check

• fixstyle --> ckstyle fix

• csscompress --> ckstyle compress

不同之处：

• fixstyle给出了额外的参数：--fixedExtension（修复后文件的扩展名）, --singleLine（自动修复并以单行模式格式化），--safeMode（安全模式，不做某些“本工具不能完全保证正确”的修复）
• compress给出了额外的参数：--safeMode（安全模式，不做某些“本工具不能完全保证正确”的修复），--browsers（是否分浏览器压缩）, --compressExtension（压缩后文件的扩展名）, --combineFile（是否将多个压缩后文件合并），这些参数目前有的尚未实现~~~

此外，自 CSSCheckStyle1.1 以后开始，新增如下几个命令：

• ckstyle install/add/get pluginName 用于从 ckstyle-pm 安装新的规则插件
• ckstyle uninstall/remove/rm pluginName 用于移除已安装规则插件
• ckstyle installcmd/addcmd/getcmd commandName 用于从 ckstyle-pm 为ckstyle添加子命令，如 ckstyle demo xxx.css
• ckstyle uninstallcmd/removecmd/rmcmd commandName 用于移除已安装的子命令

安装的插件将放置在ckstyle/userplugins/plugins目录下

安装的子命令将放置在 ckstyle/userplugins/commands目录下

Examples

<pre> ckstyle check 用默认配置检查当前目录下的所有css文件 ckstyle check -h / ckstyle --help 显示帮助 ckstyle check file.css 检查单个css ckstyle check dir 检查目录下的所有css ckstyle check -r dir 递归检查目录下的所有css ckstyle check -p file.css 检查结果打印到控制台，默认是写file.css.ckstyle.txt文件 ckstyle check -r -p dir 同上 ckstyle check -c xxx.ini 使用xxx.ini中的配置进行检查 ckstyle check -c xxx.ini -r -p 使用xxx.ini中的配置进行递归检查，并将结果输出到控制台 ckstyle check -r --extension=.test.txt --include=all --exclude=none --errorLevel=2 使用配置的信息进行检查 ckstyle check -c xxx.ini -r -p --extension=.test.txt --include=all --exclude=none --errorLevel=2 dirpath </pre>

CommandLine Options

<pre> -h / --help 显示帮助 -r 递归检查所有文件 -p 将结果打印到控制台（同时删除已有的对应的结果文件） -c / --config 指定配置文件（默认使用~/ckstyle.ini） --include 指定包含的规则（多个规则请以逗号分隔，例如: rule1,rule2,rule3） --exclude 指定除外的规则（格式同--include） --extension 指定扩展名 --errorLevel 指定检查出的异常等级(0-error, 1-warning, 2-log) // for fix and compress --fixedExtension 修复后文件的扩展名，如.fixed.css，none为替换原文件（将生成一个.bak文件保存原文件） --compressExtension 压缩后文件的扩展名，如.min.css，none为替换原文件（将生成一个.bak文件保存原文件） --safeMode 修复和压缩的安全模式 --singleLine 自动修复成单行模式（默认是多行模式） --browsers 分浏览器压缩 </pre>

Config File

可通过以下三个方式来指定配置文件：

• 命令行通过-c 或 --config来指定配置文件路径
• 在执行ckstyle命令的当前目录下添加 ckstyle.ini，则默认获取此配置文件
• 在用户默认目录放入ckstyle.ini

Config File Options

<pre> error-level [=0] 异常等级 include [=all] 包含的规则 exclude [=none] 除外的规则 recursive [=false] 是