不要有解析错误

解析错误通常是由于敲错字符或者丢失了分号、花括号等错误,会造成浏览器不能正常的解析某条规则或者属性。解析错误必需修复。

不要有类名连接

类名连接是类似 .foo.bar 这样的写法,虽然技术上来说CSS支持这样写,但是IE6以及之前版本的IE并不能很好地支持这种方式。
 
ID: adjoining-classes

删除空规则

空规则是指一条规则中不包含任何属性。比如 .foo{}
空规则通常来自没有彻底清理干净的css重构。清除空的规则既减少了CSS文件大小,又节省了浏览器的内存加快了渲染速度,一举两得。
 
ID: empty-rules

正确地使用display属性

虽然你可以在单条规则中定义任何属性的组合,但是实际上浏览器在渲染的时候,一些属性会被忽略。Csslint会检查以下属性组合:
  • display: inline 行级元素不应该有width、height、margin(包括扩展写法)、padding(包括扩展写法)或者float。(译注:IE的双边距bug可以用其它方法来解决)
  • display: inline-block 不应当有浮动。(译注:使用inline-block来让触发IE haslayout行为的同学注意啦)
  • display: block 不应当使用 vertical-align
  • display: table-* 不应当使用margin(包括扩展写法)或浮动。
去掉这些被浏览器忽略的且很容易引起问题的属性很明显也是一个一举两得的做法。
 
ID: display-property-grouping

不要过多地使用浮动

使用浮动来布局并不是一个好的方式,只不过有时候你不得不这样做。CSS Lint简单地检查样式中是否出现了10次以上的浮动,如果是则出现一个警告。出现如此多的浮动一般意味着可以对布局做一些优化。
 
ID: floats

不要过多地使用 Web Fonts

Web Fonts 慢慢开始流行,@font-face的使用率也在逐渐升高。但是使用Web Fonts会带来一些性能问题,比如字体文件的下载会阻塞浏览器渲染,当字体文件过大时,会使页面的加载变得非常慢。所以,CSS Lint会在你使用了5个以上的字体时给出警告。
 
ID: font-faces

不要过多的使用 font-size

一个站点对文字的排版应当是预订好的一组集合,其中包括font-size,如果font-size出现过多,则意味着对字体的定义可以再重构一下,抽象出来
 
ID: font-sizes

不要使用ID(#)选择器

不使用ID选择器的理由是ID选择器的规则都局限于某一个特定的元素,导致它无法被重用。更好的方法是使用类(class)选择器来完成。(译注:这条得斟酌一下了…)
 
ID: ids

不要修饰标题元素

标题元素(h1-h6)应当被定义为顶级规则,而不应当像这样在前面加上一个修饰符来把它限定在某一个范围:
.foo h1 {
    font-size: 110%;
}
因为在整个页面中标题元素应当具有一致的外观。(译注:可以给标题加上class)
 
ID: qualified-headings

标题的样式应当只定义一次

标题元素(h1-h6)在CSS中只能被定义一次,CSS Lint会警告重新定义的标题元素。具体原因同上条。
 
ID: unique-headings

不要给属性值“0”加上单位

去掉属性值“0”的单位是一个很简单的节省空间的做法。对浏览器而言“0px”、 “0em”都是 “0”,所以何不去掉这个单位,能省则省嘛!
 
ID: zero-units

使用浏览器私有属性也同时定义标准属性

在使用某个浏览器私有的属性时,在浏览器私有属性之后也要定义好标准属性(如果有的话),比如:
.foo {
    -moz-border-radius: 5px;
    border-radius: 5px;
}
这样能让其它支持标准的浏览器也有期望呈现。
 
ID: vendor-prefix

CSS渐变需要加上所有的浏览器私有属性

现在CSS的渐变属性并没有标准,意味着跨浏览器使用渐变效果必需使用所有浏览器的私有渐变属性。CSS Lint会在使用渐变的规则中检查所有浏览器的私有实现同时存在,否则会给出一个警告。
 
ID: gradients

不要让选择器成为正则表达式

CSS3加入了很多复杂的但是很慢的属性选择器(比如“~=”)。在使用这些选择器的时候尽量不要使用太多太复杂的匹配,以免使渲染性能下降。
 
ID: regex-selectors

警惕错误的盒模型

边框和填充(Padding)都会在元素的外部加入一些空间,在给具有边框和填充的样式中设置宽度和高度很有可能会因为计算问题导致最后的渲染不是期待值。CSS Lint会在这种情况下给出警告。
 
ID: box-model

不要使用@import

@import指令会阻塞某些浏览器的CSS并行下载(参考Don’t use @import)。请使用link标签来取代之。
 
ID: import

不要使用 !important

使用!important会覆盖所有层级的属性,如果多个important应用于一个元素时会使结果不可预知。CSS Lint会检查是否在使用!important并给出警告。
 
ID: important

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注