CSS Lint检测规范
CSS Lint检测规范
CSS Lint是一个开源的校验CSS文件质量的工具，最初是由Nicholas C. Zakas和Nicole Sullivan编写的，最初版本在Velocity会议上于2011年6月发布。CSS Lint的检测规则包括错误的和警告，当选择器或属性书写不正确、漏掉了大括号、多写了分号等时，会提示解析错误，解析错误优先提示。为了让css代码拥有更好性能，更标准，CSS Lint的检测规则有：
❦ 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
❦ 2. box-sizing(box-sizing)
即使设置了box-sizing，仍然会warn，因为ie67不支持此属性
❦ 3. display(display-property-grouping)
(1)当设为inline时，不允许设置width, height, margin, margin-top, margin-bottom, float.
(2)当设为inline-block时，不允许设置float.
(3)当设为block时，不允许设置vertical-align.
(4)当设为table-*时，不允许设置margin, float.
❦ 4. 样式冗余(display-property-grouping)
(1)同样属性名以及属性值,在同一个容器中不允许声明两遍
(2)相同的属性名(但不同值)，必须放在一起，不允许被其他属性隔开
❦ 5. 空的样式规则(empty-rules)
不允许出现空的样式规则
❦ 6. 使用已知样式，方式拼写错误(known-properties)
(1)csslint不会检测以横线(-)开头的属性名
(2)属性名和属性值的拼写都会检查
❦ 7. 链式class(known-properties)
(1)不允许对相连的class(即链式class,类似于.foo.bar这样的)设置样式
(2)可以新增一个class来代替链式class
❦ 8. vendor前缀(compatible-vendor-prefixes)
当出现以下样式时，应该拥有vender前缀，此时csslint会逐个检查Firefox(-moz),Safari/Chrome(-webkit),Opera(-o),以及Internet Explorer(-ms)前缀是否齐全，若少一种前缀，则会warn。
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
appearance
border-end
border-end-color
border-end-style
border-end-width
border-image
border-radius
border-start
border-start-color
border-start-style
border-start-width
box-align
box-direction
box-flex
box-lines
box-ordinal-group
box-orient
box-pack
box-sizing
box-shadow
column-count
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-width
hyphens
line-break
margin-end
margin-start
marquee-speed
marquee-style
padding-end
padding-start
tab-size
text-size-adjust
transform
transform-origin
transition
transition-delay
transition-duration
transition-property
transition-timing-function
user-modify
user-select
word-break
writing-mode
❦ 9. 渐变样式(gradients)
对于渐变样式，不同浏览器有不同的属性名称，不仅仅是前缀不同,区别如下
Internet Explorer 10+: -ms-linear-gradient , -ms-radial-gradient
Firefox 3.6+: -moz-linear-gradient , -moz-radial-gradient
Opera: -o-linear-gradient, -o-radial-gradient for
Safari 5+ and Chrome: -webkit-linear-gradient, -webkit-radial-gradient
Safari 4+ and Chrome(“Old WebKit”) : -webkit-gradient
csslint会检查与渐变(gradient)相关的样式，若以上样式只写了一个或几个，且没有写全，则会warn
❦ 10. 不带vendor前缀的标准属性(vendor-prefix)
要将不带vendor前缀的标准属性样式，放在带vendor前缀的属性的后面
❦ 11. 向后兼容的的颜色样式(fallback-colors)
❦ 12. 文本反向缩进
(1)当为text-indent的值设置为-99，或者更小的值(比如-100,-999)的时候,必须加上direction: ltr
(2)csslint只检测text-indent的值，而不检测其的单位(em, px)。
❦ 13. 字体过多(font-faces)
当使用超过5个字体时，会warn
❦ 14. @import(import)
(1)可以将多个css合并为一个
(2)使用多个标签引入多个css文件
❦ 15. 正则式的选择符(regex-selectors)
| (1)不允许使用类似于正则语法(*=, | =, ^=, $=, ~=)的css选择符 |
❦ 16. 通配符选择符(universal-selector)
不能将通配符(*)作为选择符的关键部分(key part)
❦ 17. 属性选择符(unqualified-attributes)
同上面的通配符一样，属性选择符不能作为选择符的关键部分(key part)
❦ 18. 零的单位(zero-units)
❦ 19. 高级选择符(overqualified-elements)
(1)若某个class紧跟(无空白符)在多个不同的元素后面, 则合法
(2)上面这条规则中，若不是多个，而只是一个的时候，则会warn
❦ 20. 属性简写(shorthand)
(1)当在一个样式规则中，同时设置了margin-left, margin-right, margin-top, margin-bottom, 则会warn。
(2)当在一个样式规则中，同时设置了padding-left, padding-right, padding-top, padding-bottom , 则会warn。
❦ 21. 背景图片冗余(duplicate-background-images)
(1)当多个样式需要使用同一张图片作为背景图片的时候，如果在这些样式规则中重复设定background-image, 则会warn
(2)当多个样式需要使用同一张图片作为背景图片的时候，应该新建一个class样式用于指定background-image，其他样式则用于设定background-position
❦ 22. 浮动(floats)
(1)当使用float超过10次时，csslint会warn
(2)在某些情况下，可以使用grid systems代替频繁的float
❦ 23. 字体大小(font-sizes)
尽可能少用font-size，而应该设定几个样式规则用于对于不同的字体大小，然后在需要设定字体大小的地方添加需要的样式规则
❦ 24. id选择符(ids)
使用class选择符代替id选择符
❦ 25. !important(important)
不允许使用!important
❦ 26. outline(outline-none)
(1)只有在包含伪类:focus的样式规则中，才能移除(设为none或者0)outline样式
(2)在包含伪类:focus的样式规则中，移除outline样式的同时，必须要使用其他样式
❦ 27. heading样式(qualified-headings, unique-headings)
(1)heading样式(h1-h6)应该全局化。也就是说在整个网站中，heading样式应该以常量形式出现。
(2)不要对heading样式做局部定制，也就是说(h1-h6)不能作为css规则的关键部分(key part)。
