Nicholas C. Zakas：介紹CSS Lint（检测工具）
Nicholas C. Zakas近日从yahoo离职，怀着冒险精神投入了自己着迷的新项目。昨天他推出了这几个礼拜工作的一个阶段成果，CSS Lint——CSS规范检测工具（在线工具地址：http://csslint.net），议论不发，先做翻译工作：
介绍 CSS Lint
不久之前，尼克尔沙利文和我宣布了我们开始在一起工作。今天，我们高兴地向各位推荐我们的第一个合作成果：CSS Lint。就像大家猜测的一样，CSS Lint的目标就是帮助大家写出更好的CSS代码。过去的数个星期里，我们花费了大量的时间（周末和夜晚——从近期博客可知Zakas最近没少熬夜）建设和制定编写CSS的规则，以帮助大家写出高效而优秀的代码。
建立规则
首先，为了检测CSS，我们建立了一些规则（更多细节的解释请点击 CSS Lint About）。这些规则是：
解析错误应该被修复
默认的，CSS Lint展示了一些解析错误。解析错误经常意味着你少输入了一个字符，以至于造成浏览器忽略了你书写的css选择器或属性。如果CSS Lint检测到了您的代码里存在解析错误，会被视为最重要的待处理问题。
避免使用多个class选择元素
这种情况具体类似“.foo.bar”的情况。当然技术上是允许CSS这样写的，但是IE7或者早期的浏览器对此写法未必能够正确解析。
移除空的css规则
任意没有包含任何属性的选择器，比如.foo{}这种问题在页面重构工作最后非常常见。清除此类空的选择器对减少样式信息和减小文件大小以利于浏览器处理方面大有益处。
精确地使用用来显示的属性
尽管你可以在CSS选择器里面定义任意组CSS属性，这些属性中的一部份依然会在显示过程中被忽略掉。这些不需要的属性充斥着CSS文件之中。CSS Lint可以检查的属性列表如下：
- 当元素拥有display:inline属性时，不能有以下属性：width, height, margin（以及任意变化）, padding（以及任意变化）, float；
- 当元素拥有display:inline-block属性时，不能有属性float；
- 当元素拥有display:block属性时，不能有属性vertical-align；
- 当元素拥有display:table-*（如display:table-cell）属性时，不能有属性margin（以及任意变化）和float。
移除这些不需要的属性可以减小文件大小和改善性能。
避免过多的浮动
使用float布局不是一个好主意，但是有时你不得不如此去做。CSS Lint 简单地帮你检查你是否使用了超过10次以上的浮动，如果超过次数，CSS Lint会显示出一个警告。使用如此多的浮动经常意味着你需要某种抽象的形式去实现布局。
避免使用过多的web字体
Web字体是随着流行发展的，并使用@font-face进行引用和升级。但是，使用web字体也会带来一些性能问题，诸如字体文件可能会过大而造成一些浏览器阻止下载它们。出于这个原因，当你在同一个样式文件中引用超过5个web字体的时候，CSS Lint会提出一个警告。
避免使用过多的字号声明
一个站点通常由有限数目的字体样式构成，当然也包括字号。如果你使用了10种以上的特殊字号，你可能会想要重构这些样式以符合标准，这些字体会帮你标记出来。
避免使用ID选择器
Id不要用作选择器，因为它们和HTML耦合得太紧，基本没有重用的可能。一定优先使用class作为选择器，然后将class应用在网页元素上。
不要为标题元素设置过多（耦合度过高）的样式
标题元素（h1-h6）应该定义为固定不变的顶级样式，而不是随页面的具体变化而变化。举例来说，下面是一个很棒的标题：
每种标题元素在一个站点中应该保持统一的显示样式。
标题元素只定义一次
每个站点的标题元素（h1-h6）应该有精确的标准。如果CSS Lint发现同一个标题元素在多处进行了定义会提出警告。
使用width:100%时要小心
在一个父级元素拥有padding属性的子元素上使用width:100%会使此元素宽度超过父级元素容器（因为子元素100%宽度的值等于父级元素的width加上左右的padding的值）。使用width:100%不是一个好主意，可以使用width:auto或者display:block来代替它。
值为0时不需要写单位
值为0时省略书写单位是一种简单减小css文件大小的办法。举例来说，“0px”和“0”有着一样精确的效果，所以请去掉单位再行保存吧！
各种浏览器专属的css属性也需要规范
当使用浏览器专属css属性，比如-moz-border-radius时，请确认此属性是否也包含在标准属性中。标准属性应该放在浏览器专属属性之后，比如：
CSS渐变属性需要指定所有的浏览器前缀
迄今为止尚没有标准的css渐变支持，所谓的跨浏览器css渐变支持方案需要使用许多不同的浏览器私有属性。当一些需要多个浏览器私有属性支持的属性没有书写完整全部浏览器私有属性时，CSS Lint会提出警告。
避免看起来像正则表达式一样的CSS选择器
CSS3添加了复杂的属性选择器支持，比如“~=”，这种选择方法的性能不敢恭维。当使用属性选择器时，不要使用复杂的看上去像正则表达式一样的选择器方案，以免付出性能上的代价。
注意遵守盒模型规则
Border和padding属性会在元素内容的周围增加空间。由于你不能实时看到你期望的调整结果，忽略border和padding调整width和height是经常出现的错误。当某元素除了padding或border额外设置了width和height时，CSS Lint会提出警告。
上述规则都是使用一个非常简单的插件模型建立的，它能够轻松地改变特殊规则或者增加新的规则。打开或者关闭特殊规则的方法尚未暴露在web界面和命令行界面中，但是它受到底层API的支持，所以寻找增加规则的速度很快。
在你的项目中
当我们高兴地介绍web界面的工具时，我们也注意到大家也许想把它包含到你自己的系统架构里。为了提供这方面的帮助，这里有为Node.js环境准备的CSS Lint。你可以通过命令行安装npm包的方式安装CSS Lint：
一旦安装成功，你可以传递进任意数量的CSS文件和目录
随后此工具会和web界面的此工具一样输出同样的信息。
开源计划
CSS Lint 是 GitHub 上的完全开源的项目。我们正在积极寻找贡献规则、修改bug或扩展功能的开发人员。此工具的规则是可扩展的，你可以轻松地去掉你不需要的规则或者添加你需要的特殊规则，然后建立一个第三方版本来适应你的需要。
CSS的分析程序也是 GitHub 上的开源项目，这个程序有一些已知的问题我计划要尽可能快地解决掉，但是它们一般符合CSS3的标准。我希望尼克尔和我能够制作出更多这方面的工具来帮助人们书写出更好的前端代码。享受写代码的过程吧！
原文地址：http://www.nczonline.net/blog/2011/06/15/introducing-css-lint-2/
工具地址：http://csslint.net/
