《web前端开发修炼之道》读书笔记-CSS篇之"含苞怒放"

高质量的CSS篇

   挂载class时多用组合,少用继承

    如果要实现下图所示的模块,应该怎么来编写CSS呢?

 

第一眼,我们可能会这样来编写CSS:

  .numberL1{border:1px solid #ccc;padding:10px;width:200px;}
    .numberL1 li{height:20px;line-height:20px;font-size:12px}
    .numberL2{border:1px solid #ccc;padding:10px;width:200px;}
    .numberL2 li{height:20px;line-height:20px;font-size:16px}
    .numberL3{border:1px solid #ccc;padding:10px;width:200px;}
    .numberL3 li{height:20px;line-height:20px;font-size:12px;color:Red}

但是看上去会感觉很冗余,里面有很多重复的代码,现在编程都讲究面向对象,讲究代码复用。作者推荐了一种思路,提取了更多粒度更小的类,吐过类的组合实现了上面的效果,当然这样也利于以后的可维护性,另一方面使类的职责更加单一,弹性更强,增加了类的重用性,提高了开发效率。

    .f12{font-size:12px}
    .f16{font-size:16px}
    .red{color:Red}
    .numberList{border:1px solid #ccc;padding:10px;width:200px}
    .numberList li{height:20px;line-height:20px}


<ul class="numberList f12">
<li>11111111111111</li>
<li>22222222222222</li>
</ul>
<ul class="numberList f16">
<li>33333333333333</li>
<li>44444444444444</li>
</ul>
<ul class="numberList f12 red">
<li>55555555555555</li>
<li>66666666666666</li>
</ul>

 


   低权重原则,避免滥用子选择器

   CSS的选择符是有权重的,当不同的选择符的样式设置有冲突时,会采用权重较高的选择符来设置样式,权重规则如下所示:

  1.     HTML标签权重为1,例如 div,p权重为1,“div p”的权重为2
  2.     class的权重为10,例如“div.footer”的权重为11
  3.     id的权重为100,例如“#selecter.red”的权重为110

但是,如果碰到了权重相同的情况该如何处理呢,如下面所示:

<style type="text/css">
span{font-size:40px}
.test{color:red}
.test2{color:green}
</style>

<span class="test test2">1234567</span>

如果出现上述这种情况,那么样式会遵循就近原则,那个选择符最后定义,就采用哪个选择符的样式。

上述情况,最终展现出来的将是绿色字体。需要强调的是,“就近原则”不是指的挂class名的先后顺序,如 class="c1 c2"与class="c2 c1"是没有区别的。


  CSS sprite

      CSS sprite主要作用是将网站的一些背景图合并到一张大图片上去,减少HTTP的请求数,从而降低服务器压力,然后再通过background-position进行定位,针对CSS sprite的文章园子里已经由很多了,这里就不讲太多,但是有点要注意,并不是说任何网站都适用CSS sprite,CSS sprite也有它的缺点,它会导致“降低开发效率”和“增大维护难度”,对于流量不是很大的网站,就没有必要去适用CSS sprite技术了!


     以上就是这期的笔记了,敬请期待下次的 《web前端开发修炼之道》读书笔记-CSS篇之"汇流成河"

posted @ 2013-02-25 14:56 cuitsl 阅读(...) 评论(...) 编辑 收藏
友情博客:大熊的外星球