CSS代碼檢查工具推薦:CSS Lint


CSS Lint是一個開源的校驗CSS文件質量的工具,最初是由Nicholas C. ZakasNicole 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/


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM