css代码检查工具--cssLint

微信公众号：前端程序猿之路
关注可了解更多的前端知识，反馈问题或建议，请公众号留言。
如果你觉得公众号内容对你有帮助，欢迎关注并转载

css代码检查工具–cssLint

cssLint简介

CSSLint 能线上分析并检测你的网站 CSS 样式表有无任何潜在问题，使用方法很简单，只需要把 CSS 内容复制贴上，最后按下 LINT！按钮就可以检查。
底下有一些设定项目可以调整检测的项目和规则，预设是全部勾取，如果没有特别的需求可以不用更动，完成之后 CSS Lint 会告诉使用者该样式表哪些部分发生问题，只要依照网站的指示修改就可以得到正确的css格式了

为了避免开发过程中，因为css书写和使用出错导致不必要的麻烦，所以开发完都尽量使用cssLint检查一下

官网链接

http://csslint.net/
https://www.w3cschool.cn/tools/index?name=csslint

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)。

28、修复解析错误（Parsing errors should be fixed）

29、避免使用多类选择符（Don’t use adjoining classes）

IE6以及更古老的浏览器对类似.foo.bar的多类选择符解析不正确，参考IE6下的多类选择符一文。

30、移除空的css规则（Remove empty rules）

这个规则不包含任何属性，类似：
.foo { }
空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。

31、正确使用display的属性（Use correct properties for a display）

由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。CSS Lint会检查一下几点：
display:inline后不应该再使用width、height、margin、padding以及float。
display:inline-block后不应该再使用float。
display:block后不应该再使用vertical-align。
display:table-*后不应该再使用margin或者float。

32、不滥用浮动（Don’t use too many floats）

虽然浮动不可避免，但不可否认很多css bug是由于浮动而引起。CSS Lint一旦检测出样式文件中有超过10次的浮动便会提示警告。

33、不滥用web字体（Don’t use too many web fonts）

对于中文网站来说Web Fonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。

34、不声明过多的font-size（Don’t use too may font-size declarations）

这是设计层面的问题，设计精良的页面不会有过多的font-size声明。

35、不在选择符中使用ID标识符（Don’t use IDs in selectors）

主要考虑到样式重用性以及与页面的耦合性。

36、不给h1~h6元素定义过多的样式（Don’t qualify headings）

全站统一定义一遍heading元素即可，若需额外定制样式，可使用其他选择符作为代替。

37、不重复定义h1~h6元素（Heading styles should only be defined once）

38、值为0时不需要任何单位（Zero values don’t need units）

39、标准化各种浏览器前缀（Vendor prefixed properties should also have the standard）

通常将浏览器前缀置于前面，将标准样式属性置于最后，类似：
.foo {-moz-border-radius: 5px;border-radius: 5px; }

40、使用CSS渐变等高级特性，需指定所有浏览器的前缀（CSS gradients require all browser prefixes）

41、避免让选择符看起来像正则表达式（Avoid selectors that look like regular expressions）

CSS3添加了一些类似~=等复杂属性，也不是所有浏览器都支持，需谨慎使用。

42、遵守盒模型规则（Beware of broken box models）

参考链接：

https://blog.csdn.net/linyiphp/article/details/79020911
http://csslint.net/
https://www.cnblogs.com/zt123123/p/7597584.html