浅谈CSS样式优化心得技巧

2016-02-17 03:05 5 1 收藏

下面是个浅谈CSS样式优化心得技巧教程,撑握了其技术要点,学起来就简单多了。赶紧跟着图老师小编一起来看看吧!

【 tulaoshi.com - 平面设计 】

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

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

1.不要使用多个class选择元素,如a.foo.boo,这在ie6及以下不能正确解析

2.移除空的css规则,如a{}

3.正确的使用显示属性,如display:inline不要和width,height,float,margin,padding同时使用,display:inline-block不要和float同时使用等

4.避免过多的浮动,当浮动次数超过十次时,会显示警告

5.避免使用过多的字号,当字号声明超过十种时,显示警告

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

6.避免使用过多web字体,当使用超过五次时,显示警告

7.避免使用id作为样式选择器

8.标题元素只定义一次

9.使用width:100%时要小心

10.属性值为0时不要写单位

11.各浏览器专属的css属性要有规范,

例如.foo{-moz-border-radius:5px;border-radius:5px}

12.避免使用看起来像正则表达式的css3选择器

13.遵守盒模型规则

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

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

1.width:100%

当宽度设置为100%的时候,CSS Lint会给出警告

浅谈CSS样式优化心得技巧,PS教程,图老师教程网

2.盒模型错误

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

好像width和height不能与padding和border同时使用,为什么会这样呢?很怪异

浅谈CSS样式优化心得技巧,PS教程,图老师教程网

3.多余的标签

比如a.class,CSS Lint会建议你直接使用.class,如果使用了a.class,会警告

浅谈CSS样式优化心得技巧,PS教程,图老师教程网

4.显示属性错误

比如display:inline与float一起使用时,会警告

浅谈CSS样式优化心得技巧,PS教程,图老师教程网

看到这里,也许你会说这一款检测工具还不够成熟,的确,它的解析错误检测,空规则检测,属性值为0带单位的检测挺不错,其余的可能有一点差强人意,但它的检测规则一直在不断丰富和完善中,同时你也可以提交规则,并且最重要的是,现在,你已经可以自己设置,关掉一些不需要的规则

浅谈CSS样式优化心得技巧,PS教程,图老师教程网

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

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

来源:http://www.tulaoshi.com/n/20160217/1577912.html

延伸阅读
随着互联网经济的不断发展,互联网上的专业网站、公众服务网站以及企业门户的数量都在飞速的增长,各网站的信息量也呈爆炸性增长的趋势。面对这些庞大的信息量,我们对网页中每一个栏目的增删,都会是一个很复杂的过程。为了提高网页的维护更新效率,我们可以使用样式表,来仅仅改变一个文件,就能达到同时改变几百个网页的外观,而其...
标签: Web开发
CSS样式 层叠顺序 当使用了多个样式表,样式表需要争夺特定选择符的控制权。在这些情况下,总会有样式表的规则能获得控制权。以下的特性将决定互相对立的样式表的结果。 正如以前所提及的,网页制作者和读者都有能力去指定样式表。当两者的规则发生冲突,网页制作者的规则会凌驾于读者的其它相同权重的规则。而网页制作者和读...
标签: Web开发
命名一直是个让我头痛的问题,特别是那些看上去差不多的模块,所以就得想办法啦,我总结了下面的方法,虽然还在试验中。希望对大家有帮助。欢迎大家提出改进的意见。具体如下: 要注意的内容: 一,命名所选用的单词应选择不过于具体表示某一状态(如颜色、字号大小等)的单词,以避免当状态改变时名称失去意义。 二,样式类名由以字母开头...
标签: Web开发
虽然CSS样式的学习需要我们动手多实践,需要多做案例,思致思考,但有时候注意资料的收集与整理也是非常重要的,在实际开发中往往会起到事半功倍的效果。在的文档中,也提供了丰富的内容。下面一些关于按钮、文本框、表单的常用CSS样式。大家可以参考。 一、按钮样式 .buttoncss { font-family: "tahoma", "宋体"; /**/ font-size:9...
标签: Web开发
相信大家对样式命名都多少感到困难,特别是想起一个有意义的名,更难。回顾了一下之前写的《 样式命名规则 》(不知道大家使用后有什么感想)结合这段时间使用上发现的一些问题,重新整理了样式的命名规则,希望能更实用些。 要避免当状态改变时名称失去意义,最常见的就是用于布局的类名,如left、right,当左边栏不再是左边栏的时候,lef...

经验教程

761

收藏

100
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部