Nicholas C. Zakas最近發布了CSS Lint，旨在檢測CSS代碼中存在的各種問題，從而寫出更高效的CSS。

CSS Lint現有的一些規則：

修復解析錯誤(Parsing errors should be fixed)

避免使用多類選擇符(Don't use adjoining classes)

IE6以及更古老的瀏覽器對類似.foo.bar的多類選擇符解析不正確，參考IE6下的多類選擇符一文。

移除空的css規則(Remove empty rules)

這個規則不包含任何屬性，類似：

.foo { }

空規則的產生原因一般來說是為了預留樣式。去除這些空規則無疑能減少css文檔體積。

正確使用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。

不濫用浮動(Don't use too many floats)

雖然浮動不可避免，但不可否認很多css bug是由于浮動而引起。CSS Lint一旦檢測出樣式文件中有超過10次的浮動便會提示警告。

不濫用web字體(Don't use too many web fonts)

對于中文網站來說Web Fonts可能很陌生，國外卻很流行。web fonts通常體積龐大，而且一些瀏覽器在下載web fonts時會阻塞頁面渲染損傷性能。

不聲明過多的font-size(Don't use too may font-size declarations)

這是設計層面的問題，設計精良的頁面不會有過多的font-size聲明。

不在選擇符中使用ID標識符(Don't use IDs in selectors)

主要考慮到樣式重用性以及與頁面的耦合性。

不給h1~h6元素定義過多的樣式(Don't qualify headings)

全站統一定義一遍heading元素即可，若需額外定制樣式，可使用其他選擇符作為代替。

不重復定義h1~h6元素(Heading styles should only be defined once)

值為0時不需要任何單位(Zero values don't need units)

標準化各種瀏覽器前綴(Vendor prefixed properties should also have the standard)

通常將瀏覽器前綴置于前面，將標準樣式屬性置于最后，類似：

.foo {-moz-border-radius: 5px;border-radius: 5px; }

使用CSS漸變等高級特性，需指定所有瀏覽器的前綴(CSS gradients require all browser prefixes)

避免讓選擇符看起來像正則表達式(Avoid selectors that look like regular expressions)

CSS3添加了一些類似~=等復雜屬性，也不是所有瀏覽器都支持，需謹慎使用。

遵守盒模型規則(Beware of broken box models)

上述某些規則也許不是最佳實踐，可根據項目需求自行添加修改，這也符合CSS Lint pluggable的宗旨。Zakas還給出了CSS Lint for Node.js的檢測工具，于是我將Zakas的demo.css在本地試跑了一下，給出的提示簡潔明了：

目前CSS Lint項目剛剛起步，正在征集一些優秀的CSS規則#issues，相信在Zakas以及Node社區的推動下，這個項目會發展地越來越好。

CSS Lint,lint是線頭的意思，大概意思就是說要找出我們寫的css代碼里的一些線頭，help you code better!

CSS Lint的檢測規則包括錯誤的和警告，當選擇器或屬性書寫不正確、漏掉了大括號、多寫了分號等時，會提示解析錯誤，解析錯誤優先提示。為了讓css代碼擁有更好性能，更標準，CSS Lint還默認有如下規則：

1.不要使用多個class選擇元素，如a.foo.boo，這在ie6及以下不能正確解析

2.移除空的css規則，如a{}

3.正確的使用顯示屬性，如display:inline不要和width，height，float，margin,padding同時使用，display:inline-block不要和float同時使用等

4.避免過多的浮動，當浮動次數超過十次時，會顯示警告

5.避免使用過多的字號，當字號聲明超過十種時，顯示警告

6.避免使用過多web字體，當使用超過五次時，顯示警告

7.避免使用id作為樣式選擇器

8.標題元素只定義一次

9.使用width:100%時要小心

10.屬性值為0時不要寫單位

11.各瀏覽器專屬的css屬性要有規范，

例如.foo{-moz-border-radius:5px;border-radius:5px}

12.避免使用看起來像正則表達式的css3選擇器

13.遵守盒模型規則

在實際項目中很多規則還不是很合理，比如避免IE6的雙倍邊距bug有時候要用到display:inline;

我測試了最近項目中的兩個css文件，警告主要出現在以下方面：

1.width:100%

當寬度設置為100%的時候，CSS Lint會給出警告

2.盒模型錯誤

好像width和height不能與padding和border同時使用，為什么會這樣呢？很怪異

3.多余的標簽

比如a.class,CSS Lint會建議你直接使用.class,如果使用了a.class，會警告

4.顯示屬性錯誤

比如display:inline與float一起使用時，會警告

看到這里，也許你會說這一款檢測工具還不夠成熟，的確，它的解析錯誤檢測，空規則檢測，屬性值為0帶單位的檢測挺不錯，其余的可能有一點差強人意，但它的 檢測規則一直在不斷豐富和完善中，同時你也可以提交規則，并且最重要的是，現在，你已經可以自己設置，關掉一些不需要的規則

這個時候，CSS Lint就會顯得好用很多。

假以時日，我相信CSS Lint會越來越強大的。More and more Strong, Smart and Useful!

個人觀點：雖然不是很智能，但是對于初學者還是很有幫助的！

總結

以上是生活随笔為你收集整理的css检测,CSS检测工具 CSS Lint简介的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。