CSSCheckStyle——CSS的解析、检查、修复和压缩的解析、检查、修复和压缩
前言
《人人FED CSS编码规范》中,对CSS的编写方式进行了严格的约束和说明,但是如何在实际开发过程中,确保代码能够严
格遵循规范的要求,是规范制定者必须要考虑的问题。
人为遵守规范,是规范制定的初衷,也是最终目标,但是在规范没有变成习惯之前,人为遵守终归是“不靠谱”的。因此:“无工
具,不规范”,有了规范,必定需要配套的工具来确保规范的执行。
说起来也比较奇怪,同样是前端开发的三大语言之一,CSS的检查工具备受冷落,而JS的代码规范检查工具则层出不穷。
JSLint/JSHint/gjslint等神器不断涌现,且检查的严格程度令人瞠目结舌,但是CSS的检查工具却寥寥无几,仅有的一些检查工
具,也只对CSS的取值、是否符合W3C规范进行了检查,对于代码风格只字不提,而各大互联网公司的开发规范中,对于代
码风格是有严格约束的。因此:
一个严格按照规范检查CSS代码风格问题的工具是必不可少的
另外,CSS的检查、修复、排序、合并、压缩等功能,是相互关联的,并不是相互孤立的。比如:只有进行了完整的CSS代
码修复与合并,才能最大限度的实现压缩。而目前已有的CSS检查、属性排序、压缩等工具,实现方式五花八门,实现语言
也是多种多样,不利于把CSS相关的功能有机的整合在一起,也不利于工具的集成和功能的扩展。因此:
依据完善的开发规范,实现一个自动修复CSS代码(为开发者)、并在修复的基础上压缩代码(为浏览器)的工具,也是很
有必要的。
因此,CSSCheckStyle(简称ckstyle)就应运而生了。它自主实现了CSS的解析、检查、修复与压缩,不仅能够检查出CSS
的代码风格和取值问题,还能够对CSS代码进行自动修复和压缩,给出符合规范的“开发者视图”代码和高效率的“浏览器视
图”代码。此外,它充分利用插件的特性,可以方便灵活的实现功能扩展。
目前此工具已经在github上开源,欢迎大家围观,并加入我们:https://github.com/wangjeaf/CSSCheckStyle
部分已有CSS工具的分析
为了避免重复造轮子,我们先分析一下现有的一些CSS相关的自动化工具,这里主要分析以下三个工具:
1. CSS代码压缩工具: YUICompressor
2. CSS代码检查工具: CSSLint
3. CSS属性重排工具: CSSComb
YUICompressor
YUICompressor是基于Java的CSS代码压缩工具,主要实现原理是:
1. 将CSS文件读取并解析成字符串
2. 利用正则表达式,替换该字符串中的“应该被替换”的内容
3. 替换完成之后的字符串即为CSS压缩后的内容
下面是YUICompressor源代码的部分截图
由于YUICompressor的这种实现方式,导致了它必然存在一些缺陷,例如:
1.代码压缩率有限,不能实现高级的CSS压缩,比如下面所示的规则压缩: