编写高质量代码:Web前端开发修炼之道（二）

第四章:高质量的css

1)怪异模式和标准模式

在标准模式中，浏览器根据规范表现页面；而怪异模式通常模拟老式浏览器的行为以防止老站点无法工作。

他们两者之间的差异比较典型的表现在IE对盒模型的解析：在标准模式中，网页元素的宽度=padding+border+width;而在怪异模式中，width本身就包括了padding和border。

在怪异模式中：设定width,然后margin:0 auto;是无法居中的。标准模式中可以正常工作。

于是我们尽量避免怪异模式，而选用标准模式，这样就出现了DTD(文档类型定义Document Type Definition)；

DTD(文档类型定义Document Type Definition)：是一种保证html文档格式正确的有效方法，一个DTD文档包含元素的定义规则、元素间关系的定义规则，元素可使用的属性，可使用的实体或符号规则。

DTD声明：如果漏写DTD声明，FF仍然会按照标准模式来解析，但在IE中（6.7.8）就会触发怪异模式，现在一般可以直接手动设置为标准模式。

2)如何组织css

笔者按照职能分为三大类：base、common、page 这三者不是并列结构，而是层叠结构。

1：base层：最底层，基本层，一般放置粒度最小的通用类--原子类，这一层会被所有页面引用，力求精简，通用，有高度可移植性。

　　推荐代码：.fl{float:left;} .fr{float:right} .mt15{margin-top:15;} .mb15{margin-bottom:15;} .w50{width:50px;}  .cb{clear:both;} .cr{clear:right;}

　　　　　　　.pr20{padding-right:20;}

　　从上面的代码可以看出来，base层结构粒度非常小，非常实用于组合类的结构。

base层可分为两大部分:css reset 和 通用原子类

css reset：就是重定义标签的样式，覆盖掉浏览器提供的默认样式；如*{margin:0;padding:0;}，因为浏览器默认的边距是最影响css布局的。最好不要使用*,而是罗列出要覆盖的标签元素：如：ol li ul h1 dl dt .... 将冲突降至最低。

从笔者的经验来看，base层的类虽然粒度小，但它非常有用,设置大量这样的类有利于减少page层的代码量，也为css的模块化提供了帮助。

2：common层：中间层，高度重用的模块，视为组件（类似于网站内一个一个的同样式的板块）。

模块化层面：将页面内的元素拆分成一小块一小块功能和样式相对独立的小模块。类比于 房子（网站），不同的门窗、门窗有不同的小元件（common），这一层最好由一个人负责统一管理。

common层是网站级的,不同的网站有不同的common层，而同一个网站只有一个common层。

3：page层：页面级的样式，最高层。对重用性没要求.(就好像房间里的画，不同房间会挂不同的画。)

3）如何划分css模块

一句话概括:封装、多用组合少用继承的原则。

将相似部分提取出来，再进一步拆分成更小的模块。

原则：

1:模块和模块之间尽量不要包含相同的部分,如果有相同部分,应将他们提取出来,拆分成一个独立的模块.

2:模块应在保证数量尽可能少的原则下,做到尽可能简单,以提供重用性.

 

4)css命名

1：使用英语

2：骆驼命名法（从第二个单词开始首字母大写，如dropMenu,subNavMenu）

3：划线命名法（- 或_ 如drop-menu ,sub_nav_menu）

使用骆驼命名法和划线命名法可以清楚的将单词区分开来，提高可读性。推荐这两种方式组合使用。一般骆驼命名法用于区别不同单词，划线用于表明从属关系。

4：子选择符：滥用子选择符容易留下冲突隐患，为了降低风险，不推荐轻易使用子选择符。

总结:base层和common层是公共的，一般由一个人负责，不会出现冲突，page层多人合作使用，容易冲突，在命名css时，如果模块多次反复出现，应该将它归为common层，不用考虑冲突问题，出现次数少，则归为page层。

5：page层多人合作很容易引起命名冲突，为解决这一问题，一般每个人会分配一个标识符，然后给命名加上该前缀的方法来解决。

5)多用组合，少用继承

继承的思路是将一个复杂且包含变化的类，拆分成几个复杂但稳定的子类。首先明确一个抽象的父类，父类有着几乎所有的方法和属性，子类继承父类，根据需求添加新的方法和属性，覆盖掉与父类有变化的方法和属性。

缺点:使用继承的话,任何一点小的变化也需要重新定义一个类,很容易引起类的爆炸式增长,产生一大堆有着细微不同的子类.

组合的思路是将一个复杂的类分成容易产生变化的部分和相对稳定的部分,将容易变化的部分拆分出去,每一种可能的变化设计成一个个单独的类,类之间没有继承关系,遵循了面向对象设计的"单一职责"原则.这些容易变化的类的实例赋值给主体类作为一个属性,实现了类的组合.

用组合的方式,可大大减少类的数量.
注:margin是一个有点特殊的样式，相邻的margin-left;margin-right不会重合，但是相邻的margin-top;margin-bottom会产生重合，所以相邻的标签不要混合使用，统一使用margin-top或margin-bottom。

 

6)低权重原则

标签权重是 1；class权重是 10；id 权重是100

当有冲突时，会选择权重高的样式，权重一样时，就近原则，最后定义的为最近，css权重应该尽可能的低。

7）css sprite---将网站的多张背景图片合并到一张大图片上。

　　可以解决a标签hover状态时背景图片出现瞬间空白的问题。

　 每次图片加载会发出http请求，一张图片需要一条http请求，http请求数越多，访问服务器的次数越多，那server压力就越大，css sprite亦可以减小服务器的压力

1：只能用于作为背景的图片background-image

2：不能用于对于横向和纵向都平铺的图片。至于原因，自己去测试就知道了。

8）haslayout----是IE浏览器一个专有的属性，用于css的解析引擎。有时候网页会在ff下面运行正常，但到IE下就不正常，往往是因为hasLayout没有触发的原因。

可以通过设置width,height,position:relative来触发，但一个更好的解决办法是zoom:1可以触发hasLayout

9)块级元素和行内元素(可通过修改display属性来切换块级和行内)

块级元素：可设置宽高，margin padding 正常使用，独占一行

行内元素：不能设置宽高，margin padding 在水平方向会产生边距效果，竖直方向不会产生边距效果，在同一行内。

display:inline-block 行内块级元素；可设置宽高，可设置margin;padding;却不独占一行  （IE6/7不支持，可通过触发haslayout来解决）

10）relative,absolute和float

1：只有设置了position属性时，left top right bottom z-index属性才会激活，否则设置了也无效。

2：position设置为relative或absolute都可以改变元素在文档流中的位置。网页虽然看起来是二维结构，也是有z轴的，默认所以元素都在z-index:0这一层----这就是文档流。

3：不设置position，那么网站的默认position：static .

4：position设置为relative或absolute都会让元素“浮”起来，也就是z-index>0时，它会改变正常情况下的文档流。

position:relative---会保留自己在z-index:0层的占位，属于占位上浮。

position:absolute---会完全脱离文档流，不保留占位，这样就通常会覆盖掉下面的元素。

他们的left,bottom,top.right四个值是相对于 自己最近设置了position的祖先元素，若都没有设置，则想对于body元素

5：float:左右浮动，它也能改变文档流，但是不会上浮，只会在z-index:0层改变正常的文档流排列，影响周围的元素。

11）水平居中的几种方式

1：文字、图片等行内元素的水平居中------text-align:center   这个属性能够解决在文字，图片，行内元素的水平居中。

2：确定宽度的块级元素水平居中-----margin:0 auto;

3：不确定宽度的块级元素水平居中

　　A:table 标签实现----table本身不是块级元素，不设定宽度的话，它的宽度由内部元素的宽度“撑起”，仅需设置margin:0 auto就可以居中（例：分页<table><tr><td><ul><li>）

　　　缺点：增加了无语义标签，加深了标签的嵌套层数。

　　B:将要居中的标签转换为行内元素，然后在父标签设置text-align:center;  缺点：因为转换成了行内元素，可能会带来一些限制。

C:通过给父标签设置float,position:relative;left:50%,子标签设置position:relative;left:-50%;来实现

12）竖直居中

1：父标签不确定，子标签为文本，图片，块级元素的竖直居中------通过给父标签设置相同的上下边距来实现居中padding

2：父标签高度确定，单行文本竖直居中----------line-heiht来实现

3：父标签高度确定，多行文本，图片，块级元素竖直居中

　　A:vertical-align属性：当父元素为td或th是，改属性才会生效，后来查证，对inline-block等内联元素都有效。对于块级元素可设置display:table-cell来激活这个属性使之有效。

　　B:通过给父子两层元素分别设置top:50%，top:-50%来实现，也需要设置position：relative；position：absolute;

13)网格布局

一个页面经常会分为好几块，每次呈现给用户的最好先是主体内容，这样视觉效果会好些，感觉网速很快。

在设计的过程中，需要把主体内容的html标签要保证在其他内容之前加载，（就是将主体内容的html标签顺序靠前）

14）z-index

该属性在设置position后激发，z-index越大， 元素位置越靠上。也可设置为负数，这样，元素会在body之下。

转载请注明出处

原文地址:http://www.cnblogs.com/Joans/archive/2012/09/11/2680256.html