日期:2014-05-17  浏览次数:20653 次

csslint检测规范
1. 盒模型(box-model)/*消灭*/
    (1)当设定width 的同时,还设置了border,border-left,border-right,padding,padding-left,padding-right中的任意一个,那么必须显示设置box-sizing
    (2)当设定height的同时,还设置了border,border-top,border-bottom,padding,padding-top,padding-bottom中的任意一个,那么必须显示设置box-sizing
    例如:
            正确
            .mybox { box-sizing: border-box; border: 1px solid black; width: 100px; }
   
           
2. box-sizing(box-sizing)/*消灭*/
    即使设置了box-sizing,仍然会warn,因为ie67不支持此属性
   
   
3. display(display-property-grouping)/*消灭*/
    /*csslint在此出只提到了显式设置display时的情况,对于未设置display时,如何检查如何警告未作描述*/
    (1)当设为inline      时,不允许设置width, height, margin, margin-top, margin-bottom, float.
    /* 关于inline和float,csslint还是提到了ie6 double margin ,但没有说对于要怎么处理 */
    (2)当设为inline-block时,不允许设置float.
    (3)当设为block       时,不允许设置vertical-align.
    (4)当设为table-*     时,不允许设置margin, float.
    例如:
            正确:
            .mybox { display: inline; margin-left: 10px; }
            错误
            .mybox { display: inline; height: 25px; }
          
           
4. 样式冗余(display-property-grouping)
    (1)同样属性名以及属性值,在同一个容器中不允许声明两遍
    (2)相同的属性名(但不同值),必须放在一起,不允许被其他属性隔开
    例如
            正确:
            .mybox { border: 1px solid black; border: 1px solid red;   }
            错误:
            .mybox { border: 1px solid black; border: 1px solid black; }
            .mybox { border: 1px solid black; color: green; border: 1px solid red; }


5. 空的样式规则(empty-rules)
    不允许出现空的样式规则
    例如   
            错误:
            .mybox {}
            .mybox { /* a comment */ }

           
6.使用已知样式,方式拼写错误(known-properties)
    (1)csslint不会检测以横线(-)开头的属性名
    (2)属性名和属性值的拼写都会检查
    例如
            错误:
            a { clr: red;   }
            a { color: foo; }
           
           
7.链式class(known-properties)
    (1)不允许对相连的class(即链式class,类似于.foo.bar这样的)设置样式
    (2)可以新增一个class来代替链式class
    例如
            错误:
 &nb