修復解析錯誤(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)