css代码纠错机制,与排版

 关于代码静态质量检查,在大佛的上一篇文章 《 JavaScript 代码静态质量检查 》中已经说得很明白了,虽然主要讲的是 JavaScript 方面,但代码静态质量检查的本质是不变的,今天我们来介绍一下 CSS 方面的静态质量检查。

CSS 中也有一些 Lint 工具,例如 CSSLint , PrettyCSS , recess , CKStyle , stylelint ,当然还有百度 EFE 出品的 CSS 代码风格检查工具 CSSHint 。本文将从功能、性能、适用范围、规则实现、个性化几个方面对这几个 Lint 工具进行对比。

 CSSLint

CSSLint 和它底层所使用的解析器 parserlib 都是 Nicholas C. Zakas 的作品(当然, ESLint 也是他的作品)。它适用于浏览器以及 CLI 环境,在浏览器端和 CLI 环境中分别是两套代码,这么做的原因是它的底层库 parserlib 在浏览器和 CLI 环境分别是两套。

功能上, CSSLint 提供了对 CSS 的解析、检查等功能。在规则实现方面,无法通过 JSON 配置来管理,默认的规则全部在 src/rules/ 目录中,要添加自定义规则,必须通过全局的 CSSLint.addRule 方法来实现。

实现上, CSSLint 主要是利用事件监听,在底层 parse CSS 过程中触发事件,例如 startstylesheet 、 endstylesheet 、 charset 、 import 、 namespace 、 startmedia 、 endmedia 、 startpage 、 endpage 、 startrul 和 endrule 等,事件回调中会返回当前 AST 的信息,开发者根据这些信息来进行规则检测。

性能上,如果不添加自定义的规则,性能还是不错的,但是一旦添加自定义规则,性能就会打些折扣。这是融资监管底层解析器 parserlib 的原因, parserlib 功能比较单一,而且返回的 AST 上信息不是很丰富,也不支持插件机制,因此要实现一些自定义的规则,基本只能靠正则匹配来实现。

CSSLint 开发时间比较早,同时也因为大神的影响力,因此现在周边配套非常丰富,支持各种编辑器例如: Textmate , Sublime Text , Atom , Vim , Emacs 等等。

你可能感兴趣的:(css代码纠错机制,与排版)