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)使用多個<link>標簽引入多個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)。
在線檢測地址:http://csslint.net/