CSSCheckStyle——CSS的解析、检查、修复与压缩

《CSSCheckStyle——CSS的解析、检查、修复与压缩》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、CSSCheckStyle——CSS的解析、检查、修复和压缩王致富2012-12-5前言《人人FEDCSS编码规范》中，对CSS的编写方式进行了严格的约束和说明，但是如何在实际开发过程中，确保代码能够严格遵循规范的要求，是规范制定者必须要考虑的问题。人为遵守规范，是规范制定的初衷，也是最终目标，但是在规范没有变成习惯之前，人为遵守终归是“不靠谱”的。因此：“无工具，不规范”，有了规范，必定需要配套的工具来确保规范的执行。说起来也比较奇怪，同样是前端开发的三大语言之一，CSS的检查工具备受冷落，而JS的代码规范检查工具则层出不穷。JSLint/JSHint/gjslint等

2、神器不断涌现，且检查的严格程度令人瞠目结舌，但是CSS的检查工具却寥寥无几，仅有的一些检查工具，也只对CSS的取值、是否符合W3C规范进行了检查，对于代码风格只字不提，而各大互联网公司的开发规范中，对于代码风格是有严格约束的。因此：一个严格按照规范检查CSS代码风格问题的工具是必不可少的另外，CSS的检查、修复、排序、合并、压缩等功能，是相互关联的，并不是相互孤立的。比如：只有进行了完整的CSS代码修复与合并，才能最大限度的实现压缩。而目前已有的CSS检查、属性排序、压缩等工具，实现方式五花八门，实现语言也是多种多样，不利于把CSS相关的功能有机的整合在一起，也不利于工具

3、的集成和功能的扩展。因此：依据完善的开发规范，实现一个自动修复CSS代码（为开发者）、并在修复的基础上压缩代码（为浏览器）的工具，也是很有必要的。因此，CSSCheckStyle（简称ckstyle）就应运而生了。它自主实现了CSS的解析、检查、修复与压缩，不仅能够检查出CSS的代码风格和取值问题，还能够对CSS代码进行自动修复和压缩，给出符合规范的“开发者视图”代码和高效率的“浏览器视图”代码。此外，它充分利用插件的特性，可以方便灵活的实现功能扩展。目前此工具已经在github上开源，欢迎大家围观，并加入我们：https://github.com/wangjeaf/CS

4、SCheckStyle部分已有CSS工具的分析为了避免重复造轮子，我们先分析一下现有的一些CSS相关的自动化工具，这里主要分析以下三个工具：1、CSS代码压缩工具：YUICompressor2、CSS代码检查工具：CSSLint3、CSS属性重排工具：CSSCombYUICompressorYUICompressor是基于Java的CSS代码压缩工具，主要实现原理是：1、将CSS文件读取并解析成字符串2、利用正则表达式，替换该字符串中的“应该被替换”的内容3、替换完成之后的字符串即为CSS压缩后的内容下面是YUICompressor源代码的部分截图由于YUICompres

5、sor的这种实现方式，导致了它必然存在一些缺陷，例如：1、代码压缩率有限，不能实现高级的CSS压缩，比如下面所示的规则压缩：.test{margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px;}.test{margin:10px}2、由于所有规则都已经在源代码中硬编码，所以除非修改核心源码，否则不能很好的实现功能扩展。CSSLintCSSLint是用JavaScript实现的，用于检查CSS取值和潜在问题的工具，他使用了Nicholas大神的parser-lib作为CSS解析器，并按照p

6、arser-lib给出的API来编写检查规则。例如：检查一个规则是否为空的核心代码如下：分析其源码可以得知，CSSLint的每一个规则都是通过监听parser给出的事件来进行相应的判断：1、startrule为规则开始2、property为找到一个属性时的事件3、endrule为一个规则结束一旦规则结束并且没有统计到任何property，则说明规则为空。CSSLint很好的利用了插件机制，实现了检查规则的灵活扩展，构建了一个良性的规则开发和运行生态，但是它也存在一些不足：1、没有针对代码风格的检查，并且缺失部分检查规则。例如：下面的代码在CSSLint检查完成之后认为是没

7、有任何问题的。.test1ullia{width:10px;color:#ffffff;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}实际上，依据《人人FEDCSS编码规范》，上述代码问题还非常多。2、检查出来的CSS问题，没有实现相应的修复方法，比如width:0px可以简化成width:0。需要开发者根据提示，人工修复。3、插件的编写略显复杂，插件中的核心操作元素是一系列的事件及其监听函数，而不是需要检查的目标（比如文件、规则、属性）本