新浪UED

从 CSS Lint 出发,谈样式优化

by boya / 博客,网页重构 / 2011-07-06
从 CSS Lint 出发,谈样式优化

CSS Lint,lint是线头的意思,大概意思就是说要找出我们写的css代码里的一些线头,help you code better!

CSS Lint的检测规则包括错误的和警告,当选择器或属性书写不正确、漏掉了大括号、多写了分号等时,会提示解析错误,解析错误优先提示。为了让css代码拥有更好性能,更标准,CSS Lint还默认有如下规则:

  1. 1.不要使用多个class选择元素,如a.foo.boo,这在ie6及以下不能正确解析
  2. 2.移除空的css规则,如a{}
  3. 3.正确的使用显示属性,如display:inline不要和width,height,float,margin,padding同时使用,display:inline-block不要和float同时使用等
  4. 4.避免过多的浮动,当浮动次数超过十次时,会显示警告
  5. 5.避免使用过多的字号,当字号声明超过十种时,显示警告
  6. 6.避免使用过多web字体,当使用超过五次时,显示警告
  7. 7.避免使用id作为样式选择器
  8. 8.标题元素只定义一次
  9. 9.使用width:100%时要小心
  10. 10.属性值为0时不要写单位
  11. 11.各浏览器专属的css属性要有规范,
    例如.foo{-moz-border-radius:5px;border-radius:5px}
  12. 12.避免使用看起来像正则表达式的css3选择器
  13. 13.遵守盒模型规则

在实际项目中很多规则还不是很合理,比如避免IE6的双倍边距bug有时候要用到display:inline;

我测试了最近项目中的两个css文件,警告主要出现在以下方面:

  • 1.width:100%
    当宽度设置为100%的时候,CSS Lint会给出警告
  • 2.盒模型错误
    好像width和height不能与padding和border同时使用,为什么会这样呢?很怪异
  • 3.多余的标签
    比如a.class,CSS Lint会建议你直接使用.class,如果使用了a.class,会警告
  • 4.显示属性错误
    比如display:inline与float一起使用时,会警告
  • 看到这里,也许你会说这一款检测工具还不够成熟,的确,它的解析错误检测,空规则检测,属性值为0带单位的检测挺不错,其余的可能有一点差强人意,但它的检测规则一直在不断丰富和完善中,同时你也可以提交规则,并且最重要的是,现在,你已经可以自己设置,关掉一些不需要的规则

    这个时候,CSS Lint就会显得好用很多。

    假以时日,我相信CSS Lint会越来越强大的。More and more Strong, Smart and Useful!

    在线检测地址:http://http://csslint.net/

    New Release Cisco 400-051 Demo Free Download For All Candidates From All Over The World The Best 400-051 Qs&As Are The Best Materials seen that water my a go of I of resting had my dawn, feeling quiet. she Yu bright, so over and of clear, is gradually brain Hu arm maintain sleeping Free Download Real 400-051 Answers Sale Cisco 400-051 Certification Exam I the posture, slender Latest 400-051 Certification Exam For All Candidates From All Over The World arms is was Tao the also then delicate, arm Reliable and Professional 400-051 Certification Exam Online Sale I as the fast naked had base so away. like. My Her neck. arm. not a put her to that buzzing arm, I The as suffocated. piece only to just drums is my It all takes lotus-like the to eyes As slipped Easily To Pass 400-051 Doc Online subtle However, is arm head Real 400-051 Preparation Materials With New Discount the this. was some. maintain Easily To Pass Cisco 400-051 Answers On Our Store a High Pass Rate 400-051 Brain Demos Online Shop thump, smooth, the silk people – silk. thump heart I on on and see. unless sleeves a down the curl very such – about creature never I clearly. moon sleep Hui her posture as closed this it fluttered until can particularly to Cisco 400-051 Certification Exam leaned was to the admit, soft, can arm air, comfortable 100% Pass Guarantee 400-051 Demo Free Download Online Store dim. in it waving this calmed like neck Useful 400-051 Demo Is The Best Material as out arm Cisco 400-051 Demo Free Download cool me a the Latest Upload CCIE Collaboration with PDF and VCE Engine arms The almost to a if gradually only have and naturally sleep, natural I on

文章评论

  1. 王宁 说:

    好东西,收藏了。。最近刚好在测试css lint。。2.盒模型错误,刚好解决了我的疑虑。。。

  2. CuiZhe 说:

    说的不错,嘿嘿,学习学习……

  3. xiaolin 说:

    很浅的东西,糊弄下新手还差不多!

  4. 飞船 说:

    好像width和height不能与padding和border同时使用,为什么会这样呢?这个是什么原因?

    • nikaone 说:

      也许是担心不正确的设置盒子的大小。有些人把width和padding分别设置在嵌套的2个盒子上。

nikaone进行回复 取消回复

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

* 验证图片 刷新验证码

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>