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