编写高质量代码（3）

模块化CSS，引入面向对象编程思想

如何划分模块-单一职责，在这里我放上一张书里最终的效果图

如此划分模块，尽量可以多的复用而又不失数量较少，找到模块数量和复用度的一个平衡点



CSS的命名-命名空间的概念

我们可以使用驼峰式命名例如timeList这样可以清楚地区分单词，非常好认，当然我们也可以使用-或者_来实现这种表示方法有一种包含关系，timeList-lastItem，这样就能清楚地理解为是timeList下的lastItem，

挂多个class还是新建class-多组合，少继承

更建议多挂class如果遇到非常多的变化，而样式其实就几种，那我们没必要给每一个一一设计class，只需要把公共的样式设置成单一的class来给一个加多个class，虽然会使class看起来非常冗杂，但比其他的效率还是建议如此做，我截了一下天猫的代码，非常相似



如何处理上下margin

对于模块而言每次的margin一般是不同的，我们可以用到组合式，多挂几个class就可以方便解决不同模板margin不同，将margin提取出来，不纳入模板里面，但相邻的margin-top和margin-bottom会产生重合，最好统一使用top或者bottom中的一种

低权重原则

CSS样式是可以层叠的

权重是怎么回事呢，HTML标签的权重是1 class的权重是10 id的权重是100 例如 div p 权重是1+1=2

strong.demo=1+10=11，如此计算，如果权重相同就采用就近原则，谁最后定义就使用谁，为了保证样式容易被覆盖，提高可维护性，CSS选择器需保证权重尽量的低，少使用自选择器，多添加class，便于维护。

CSS sprite

将网页的背景图合到一张大图，大大减少网页HTTP请求，减少服务器压力

如何掌握呢，

他合并的只能是用于背景的图片，对于用

<img src=""/>

不能合并到CSS sprite上，如何合并会影响页面可读性。

对于横向和纵向都平铺的，也不能使用CSS sprite，如果是横向平铺，只能将横向平铺的图片合并成一张大图，只能竖直排列，不能横向排列，如果是纵向排列，只能将纵向平铺的图片合并成一张大图，只能横向排列，不能竖直排列。

CSS sprite虽然减少了请求次数，但降低了开发效率增大维护难度，因为一个图片坐标改动可能会影响到周边图片，所以是否使用spring要根据访问量来判断。

CSS的常见问题

网格布局的一些细节，如果在同一个div中，我们需要将我们更想让用户看到的内容的HTML标签放在前面

对于网格布局中的各种变化，组合式变得更加强大，相同模板不同的位置，只需要添加class便可以改变布局，而不需要重写一边，但这样也有一点缺点，当我们对调位置时，我们需要同时改变2个的浮动选择器

我们这是有另一种方法就是使用子选择器 例如.content-l-70 .main{float:left; width 70%}这样我们就削弱了main作为样式的挂钩能力，这样他们负责都样式就少了，可以把公共样式写在前面的class中，这样就减少了修改代码量 ，但这两种方法各有好坏，组合式更灵活，子选择器控制了格式，但对于布局来说，控制格式更重要，子选择器可能会更好