CSS LINT,优化你的CSS样式表

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

网站名称：CSS Lint

网站链结：http://csslint.net/

使用方法很简单，进入 CSS Lint！将自己网站的 CSS 档内容复制贴上，按 LINT！执行。

结果最上方会出现目前有几个错误以及警告（错误有立即修正的必要），下方会有清单列出第几行的哪个部分发生问题，可以参考最后面的描述进行修改。

让 CSS 保持在正确状态是相当重要的工作喔！如果你也是网站管理者，请在更新 CSS 样式表后透过这类工具来检测看看有无问题。

CSS Lint现有的一些规则：

修复解析错误（Parsing errors should be fixed）
避免使用多类选择符（Don’t use adjoining classes）
IE6以及更古老的浏览器对类似.foo.bar的多类选择符解析不正确，参考IE6下的多类选择符一文。
移除空的css规则（Remove empty rules）
这个规则不包含任何属性，类似：

空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少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）
通常将浏览器前缀置于前面，将标准样式属性置于最后，类似：

使用CSS渐变等高级特性，需指定所有浏览器的前缀（CSS gradients require all browser prefixes）
避免让选择符看起来像正则表达式（Avoid selectors that look like regular expressions）
CSS3添加了一些类似~=等复杂属性，也不是所有浏览器都支持，需谨慎使用。

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

上述某些规则也许不是最佳实践，可根据项目需求自行添加修改，这也符合CSS Lint pluggable的宗旨