才疏学浅,刚听到CSS Lint这么个玩意,Lint翻译成汉语是“线头”之意,CSS Lint的大概意思是编写CSS过程中留下的线头和不好的地方。我们注意这些地方才能把衣服(CSS)做的更好!可以通过在线网站或者安装csslint来检测自己的文件,CSS Lint主要说的是一下几个方面:
- 不要使用多个class选择元素,如selector.a.b,在IE6下只会解析到最后一个class,也即是b;
- 移除空的css规则,如selector{};我们可能在CSS中测试时会写一些最终不需要使用的CSS代码,但后来忘了删除,这种情况要注意的;
- 正确的使用display属性,如display:inline不要和width,height,float,margin,padding同时使用,display:inline-block不要和float同时使用等;
- 不滥用浮动,当浮动次数超过十次时,会显示警告;
- 不设置过多的font-size,当字号声明超过十种时,显示警告;
- 不滥用web字体,当使用超过五次时,显示警告;
- 避免使用id作为样式选择器;
- 标题元素只定义一次,不要给h1~h6定义过多的样式,全站定义一次就好;
- 使用width:100%时要小心;
- 属性值为0时不要写单位,反正都是0,写单位也没有什么意义;
- 各浏览器专属的css属性要有规范,标准化浏览器前缀:
例如.selector{-moz-border-radius:5px;border-radius:5px}; - 避免使用看起来像正则表达式的css3选择器;
- 遵守盒模型规则,要注意标准模式和怪异模式下的盒模型;