内容对应的帮助页面：http://csslint.net/about.html
The CSS Lint Rules
CSS Lint 规则
Parsing errors should be fixed
必须修复所有错误
By default, CSS Lint shows any parsing errors. Parsing errors usually mean you mistyped a character and may cause the browser to drop your rule or a property. Parsing errors are presented as errors by CSS Lint, the most important issues to fix.
Don’t use adjoining classes
不要使用并列的选择符
Adjoining classes look like .foo.bar. While technically allowed in CSS, these aren’t handled properly by Internet Explorer 6 and earlier.
并列选择符不支持ie6或者更早的浏览器
ID: adjoining-classes
Remove empty rules
删除空属性规则
Any rule that doesn’t contain any properties, such as:
.foo {}
A lot of times, empty rules appear as a result of refactoring without further cleanup. Eliminating empty rules results in smaller file sizes and less style information for the browser to deal with.
ID: empty-rules
Use correct properties for a display
使用display属性所对应的属性（如行内元素不能浮动）
Even though you can define any group of properties together in a CSS rule, some of them will be ignored due to the display of the element. This leads to extra cruft in the CSS file. The list of properties that CSS Lint checks for are:
display: inline should not use width, height, margin (and all variants), padding (and all variants), or float.
行内元素不能设置宽、高、margin、padding和浮动
display: inline-block should not use float.
行内块状元素不能使用浮动
display: block should not use vertical-align.
块状元素不能使用水平对齐
display: table-* should not use margin (and all variants) or float.
表格元素不能浮动和margin
Removed the ignored or problematic properties decreases file size and improves performance.
移除浏览器忽略掉的和有问题的属性可减小文件大小和改善性能
ID: display-property-grouping
Don’t use too many floats
不要使用过多的浮动
Using float for layout isn’t a great idea, but sometimes you have to. CSS Lint simply checks to see if you’ve used float more than 10 times, and if so, displays a warning. Using this many floats usually means you need some sort of abstraction to achieve the layout.
超过10次浮动定义将会出现警告
ID: floats
Don’t use too many web fonts
不要定义太多的网页字体
Web fonts are growing in popularity and use of @font-face is on the rise. However, using web fonts comes with performance implications as font files can be quite large and some browsers block rendering while downloading them. For this reason, CSS Lint will warn you when there are more than five web fonts in a style sheet.
触发字体下载，并且部分浏览器会阻塞等待字体加载完成，一个样式表，字体设置不应该超过5个。
ID: font-faces
Don’t use too may font-size declarations
不要过多声明字体大小
A site is typically made up of a finite number of font treatments, including font size. If you have 10 or more font sizes specified, you probably want to refactor into a standard set of font size classes that can be used in markup.
超过10种字体大小设置最好使用选择器
ID: font-sizes
Don’t use IDs in selectors
不要使用id选择器（这是常见问题）
IDs shouldn’t be used in selectors because these rules are too tightly coupled with the HTML and have no possibility of reuse. It’s much preferred to use classes in selectors and then apply a class to an element in the page.
id不应该作为选择器是因为这些规则与html高耦合，从而散失了重用的可能性
ID: ids
Don’t qualify headings
不要定义多层级的标题（h1-h6）
Heading elements (h1-h6) should be defined as top-level styles and not scoped to particular areas of the page. For example, this is an example of an overqualified heading:
标题元素作为最层级的样式，而不能作为页面某部分局部定义
.foo h1 {
font-size: 110%;
}
Heading elements should have a consistent appearance across a site.
标题元素应该在一个站点中有统一的样式
ID: qualified-headings
Heading styles should only be defined once
标题元素只能定义一次
Heading elements (h1-h6) should have exactly one rule on a site. CSS Lint warns if it finds more than one.
ID: unique-headings
Zero values don’t need units
0值不需要带单位
An easy way to save bytes in CSS is not include units when a value is 0. For instance, 0px and 0 are the exact same measurement, so leave off the units and save!
ID: zero-units
Vendor prefixed properties should also have the standard
带有浏览器开发商前缀的属性也应该有以标准属性定义的
When using vendor-prefixed properties such as -moz-border-radius, make sure to also include the standard property. The standard property should preferably come after the vendor-prefixed one, such as:
.foo {
-moz-border-radius: 5px;
border-radius: 5px;
}
ID: vendor-prefix
CSS gradients require all browser prefixes
使用渐进增强的版本前缀，要求所有浏览器兼容
Right now, there is no standard CSS gradient implementation, which means using CSS gradients in a cross-browser way requires using many different vendor-prefixed versions. CSS Lint warns when a rule with a CSS gradient doesn’t have gradients for all supporting browsers.
ID: gradients
Avoid selectors that look like regular expressions
避免使用类似正则表达式的选择器
CSS3 adds complex attribute selectors such as ~= that are slow. When using attribute selectors, don’t use the complex equality operators to avoid performance penalties.
ID: regex-selectors
Beware of broken box models
当心打破盒子模型
Borders and padding add space outside of an element’s content. Setting width or height along with borders and padding is usually a mistake because you won’t get the visual result you’re looking for. CSS Lint warns when a rule uses width or height in addition to padding and/or border.
border、padding、margin，如果设置了宽高就会经常出错得不到你要的视觉效果
ID: box-model
Don’t use @import
不要使用@import
The @import directive prevents some browsers from downloading resources in parallel (see: Don’t use @import)
ID: import
Don’t use !important
不要使用!important
你永远会不知道哪个最重要，最后会陷入类似母亲与妻子先救谁的困境
Using !important overides any cascaded rule and may lead to specificity war. CSS Lint checks if you’ve used !important, and if so, displays a warning. If there’s at least 10 !important declaration in your code CSSLint displays an error.
如果你的代码中超过10个!important定义，CSSLint会出现错误提示。
ID: important
Include all compatible vendor prefixes
包括所有兼容的供应商前缀
Most CSS3 properties have vendor-prefixed equivalents for multiple vendors, including Firefox (-moz), Safari/Chrome (-webkit), Opera (-o), and Internet Explorer (-ms). Including all compatible vendor prefixes will give a consistent appearance for a wider range of users.
ID: compatible-vendor-prefixes
Avoid duplicate properties
避免重复定义属性
When you include the same property twice, it may be intentional (to provide a fallback) or unintentional (copy-paste error). If duplicate properties are found one after the other with different values, this is okay. For example:
.foo {
background: #fff;
background: rgba(255, 255, 255, 0.5);
}
However, if the properties either have the same value or are located at different spots in the rule, this results in a warning. For example:
.foo {
background: #fff;
color: #000;
background: rgba(255, 255, 255, 0.5);
}
ID: duplicate-properties
网站设计
