CSS语法检查利器之csslint

本文于2015年底完成，发布在个人博客网站上。 考虑个人博客因某种原因无法修复，于是在博客园安家，之前发布的文章逐步搬迁过来。

---

背景

前段时间研究使用YUI Compressor压缩项目里的js和css文件，研究了两天之后，终于在周三晚上把YUI Compressor集成进了打包流程中；于是周四（2015-11-12）早晨一到办公室，第一件事就是把相关的构建脚本提交至配置库。

从诡异的问题开始

刚高兴没多久，测试MM就发现一个Bug，有个页面的样式出了问题，导致自动化用例执行失败，要求开发尽快处理。

起初没太注意，感觉只是个小问题，于是直接让对应特性的开发责任人去定位。一个小时之后，测试MM过来问进展，我才发现小问题不简单，一个小时过去了，但开发人员并没有找到问题原因。

开发人员很无奈，因为现象确实比较奇怪：

1. 目前发现仅在Linux部署的那套环境上出现了样式出错的现象；
2. 在开发人员、测试人员本地搭建的环境上，并没有类似的现象；
3. 开发人员定位的结果，页面引用的样式文件中，从某个定义开始，后面的样式全部都未生效；
4. 出问题的页面本周有新特性开发，但引用的样式文件本周并没有人做过更新；

对于现象本身，有来自测试人员进一步的反馈：

1. 自动化用例验证昨天的版本时，并没有发现样式的问题；
2. 测试人员反馈，早晨升级Linux环境前，人工验证时并没有发现样式的问题；

结合这些信息，突然想到上午我才把css压缩相关的构建脚本合入配置库，而出现问题的版本正好是使用更新过的构建脚本打包出来的，那么会不会是压缩工具引入的问题？带着这个疑问登录到Linux部署环境上，使用vim查看对应的css文件，有如下发现：

1. 样式文件被压缩至一行；
2. 在某一个字符后的内容，没有高亮，感觉像是vim的语法高亮似乎有问题；

由于文件内容压缩之后查看实在辛苦，于是打开eclipse查看问题相关的css文件。这时在开发人员反馈的样式定义附近，找到一处如下的css代码。

#wrapper {
    display: block;
    margin: 0 auto;
    text-align: left;
    min-width": 720px;   看到这行代码的问题了吗？
    max-width: 1000px;
}

问题找到了，原来是开发人员定义样式时，本意是书写min-width: 720px;，但在min-width后面多打了一个"，于是成了min-width": 720px;。

问题原因

找到这里，我有一个猜测，对于未压缩的样式，浏览器在加载到前述样式定义时，会直接忽略掉min-width的定义，但max-width和后续的样式定义还是有效的；但当样式文件被工具压缩到一行之后，min-width的错误会导致后续的样式定义全部被忽略掉，于是出现了前述测试MM反馈的问题。

为了证实我的想法，决定拿问题环境做个实验，直接在环境上修改css文件。

于是登录Linux环境，使用vim修改对应的css文件，将多余的"删除掉，这时vim的语法高亮恢复了正常。然后使用浏览器登录页面，清除缓存后访问之前有问题的页面，发现页面的样式恢复正常。

问题解决之后

问题虽然解决了，但问题本身值得回味。

css是脚本，和js不同，浏览器在加载css时不会校验语法，遇到错误不报错，反而会安静的忽略。这次的问题发现了，解决了，那么下次呢？下次也要花费三人时来定位和解决吗？这就纠结了，毕竟类似前述的问题靠人眼来检查css文件的语法，其实挺痛苦的。

那么有没有什么工具可以检查css的语法，在开发时就能提前发现问题，避免类似问题发生？在网上搜索了一圈，找到了csslint。

csslint

什么是csslint

如下截取自项目主页。

CSS Lint is a tool to help point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don't want.

代码主页https://github.com/CSSLint/csslint，在线检查工具http://csslint.net。

使用方法

项目的官方文档非常详细，由此可见项目的开发人员非常用心。从文档看，csslint的使用很简单。

命令行方式

进入命令行，执行如下命令，将检查test.css。

java -jar js.jar csslint-rhino.js test.css

与Ant集成

在构建脚本中增加如下的的target。

<target name="csslint">       
    <apply executable="java" failonerror="true" parallel="true">
        <fileset dir="${src.dir}" includes="**/*.css" />
        <arg line="-jar"/>
        <arg path="${lib.dir}/js.jar"/>
        <arg path="${lib.dir}/csslint-rhino.js" />      

        <!-- your customized arguments go here -->
        <arg line="--warnings=box-model,floats --errors=ids,important"/>

        <srcfile/>
    </apply>
</target>

• src.dir，待检查的css文件的存储路径。
• lib.dir，基于Rhino的csslint工具和jar文件的存储路径。

可以使用antcall来调用名为csslint的target，注意传入正确的src.dir和lib.dir。

工具选项

检查报告的格式

使用--format选项可以指定csslint工具以何种格式输出检查报告。

可选的格式

• text，默认格式。
• compact，压缩格式，warning类的信息在一行中输出。
• lint-xml，通用的XML格式。
• csslint-xml，与lint-xml格式类似。
• checkstyle-xml，可被CheckStyle工具识别的格式。
• junit-xml，可被多数CI工具识别的格式。

使用样例

csslint --format=lint-xml test.css 

检查规则

通过在命令行中调用--list-rules可以查看当前使用的csslint支持的规则及描述。

指定检查项和级别

csslint在输出报告时有两种级别，error和warning。通过使用--warnings和--errors可以指定检查过程中启用的检查项及对应的级别；如命令行中未使用--warnings或--errors，则默认启用全部的检查项及其级别的定义。

使用样例

如下样例将规则box-model和ids定义为warning。

csslint --warnings=box-model,ids test.css

如下样例将规则box-model和ids定义为error。

csslint --errors=box-model,ids test.css

忽略规则

通过使用--ignore选项，可以忽略某些检查规则。

使用样例

csslint --ignore=box-model,ids test.css

嵌入css文件的选项

除了在命令行指定检查项，csslint同时允许将工具运行时的配置信息写入到css文件中，作为文件专属的样式检查项配置。

使用方法

将规则集写在css文件的头部，工具检查文件时，以文件内的规则集为准。

使用样例

/*csslint empty-rules: false, important: true*/
.button {}

在项目中应用csslint

参照文档，把csslint工具集成到打包脚本中，对项目的css文件进行检查，找到两类问题。老实说，即便是参照报告来查找错误，想要搞清楚问题，仍然不容易，比如：

• 双引号问题。

    #wrapper {
        display: block;
        margin: 0 auto;
        text-align: left;
        min-width": 720px;   看到这行代码的问题了吗？
        max-width: 1000px;
    }
  

• 单位问题。

    .wrapper {
        display: block;
        margin: 0 auto;
        text-align: left;
        max-width: 1000x;   看到这行代码的问题了吗？
    }