《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篇之"汇流成河"