在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。
选择符Specificity值列表：

规则：
1. 行内样式优先级Specificity值为1,0,0,0，高于外部定义。
如：<div style=”color: red”>test</div>
外部定义指经由<link>或<style>标签定义的规则；
2.!important声明的Specificity值最高；
3.Specificity值一样的情况下，按CSS代码中出现的顺序决定，后者CSS样式居上；
4.由继续而得到的样式没有specificity的计算，它低于一切其他规则(比如全局选择符*定义的规则)。

算法：
当遇到多个选择符同时出现时候
按选择符得到的Specificity值逐位相加，
{数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0}
就得到最终计算得的specificity，
然后在比较取舍时按照从左到右的顺序逐位比较
———-以上内容都是权重理论上的知识，按理说支持css2.1的浏览器应该都遵循———-
IE6和IE7却不完全是那么回事；这里说的IE7排除掉IE8的兼容模式。

a { /* 权重为[0,0,1] */
    color: #00f;
    background-color: #ff0;
}
a:hover { /* 权重为[0,1,1] */
    color: #ff0;
    background-color: #00f;
}

蓝色字，黄色背景，鼠标悬停的时候颜色颠倒
接下来，在添加规则

p a.cl1 { /* 权重为[0,1,2] */
    color: #f00;
    background-color: #0ff;
}
<p><a class="cl1" href="#">...</a></p>

红色字，浅绿色背景，权重为 [0,1,2], 比第一条权重高
在IE6下”normal” (not hover) 的值被覆盖了, 但是没有覆盖”hover”的值. 换句话说，权重为[0,1,1]的”hover”依然生效, 它没有被比他权重高的p a.cl1 [0,1,2]所覆盖 (但是没有定义:hover伪类)

.cl2 a.cl3 { /* 权重为 [0,2,1] */
    color: #f00;
    background-color: #0ff;
}
<p class="cl2"><a class="cl3" href="#">...</a></p>

红色字，浅绿色背景，权重为 [0,2,1], 比第一条规则”normal”和”hover”都要高
现在在IE6下不管是”normal”还是”hover”的值都被覆盖了,这时候权重 [0,2,1] 完全覆盖了权重 [0,1,1]

div p :hover { /* 权重为 [0,1,2] */
    color: #f00;
    background-color: #0ff;
}
<div><p><a href="#">...</a></p></div>

当鼠标悬停在链接上的时候是红色字，浅绿色背景 , 权重为 [0,1,2], 比第一条”hover”的权重 [0,1,1]高
第一条:hover完全被覆盖,IE6也是一样. 这个例子的权重 [0,1,2]和第二个例子的权重是一样的，但是它多了对 伪类:hover的定义就能完全覆盖第一条”hover”规则, 而第二个例子就不会覆盖
演示地址：IE6/Win: 关于伪类:hover的权重问题
IE6/win下伪类:visited也存在类似问题，不再赘述，演示地址：IE6-/Win: 关于伪类:visited的权重问题
还有其他一些，在IE67下都会产生错误权重的情况，其他浏览器有条件的请帮忙测试一下：

p.c12 {/* 权重为[0.1.1] */
    color: #c00;
}
div .c12 {/* 权重为[0.1.1] */
    color: #090;
}
<div><p class="c12">el.class (red), el .class (green)  (错误显示 IE67/Win, IE/Mac and Op7-显示为红色)</p></div>

如果顺序换过来el .class (red), el.class (green)，就是正确的了

div .c24 {/* 权重为[0.1.1] */
    color: #009900;
}
.c23 p {/* 权重为[0.1.1] */
    color: #CC0000;
}
<div class="c23"><p class="c24">.class el (red), el .class (green)  (错误显示 IE67/Win, IE/Mac and Op7-显示为红色)</p></div>

如果顺序换过来el .class (red), .class el (green)，就是正确的了

div #c28 {/* 权重为[1.0.1] */
    color: #009900;
}
#c27 p {/* 权重为[1.0.1] */
    color: #CC0000;
}
<div id="c27"><p id="c28">#id el (red), el #id (green)  (错误显示 IE67/Win, IE/Mac and Op7-显示为红色)</p></div>

如果顺序换过来el #id (red), #id el (green)，就是正确的了
:first-letter使用的比较少，这个例子就不写了

p.c31 {/* 权重为[0.1.1] */
    color: #c00;/* red */
}
body p.c31 {/* 权重为[0.1.2] */
    color: #090;/* green */
    color: miao;  /* 故意的错误 */
}
<p class="c31">在IE67下会错误显示红色</p>

演示地址：其他权重错误
参考文献：

1. CSS Specificity: Things You Should Know
   
2. specificity tests

.box {
    position: relative;
    width: 500px;
    height: 300px;
    border: 1px solid #FFF;
    background-color: #999;
    display: table;
}

.wrap {
    display: table-cell;
    vertical-align: middle;
    *position:absolute;
    * top: 50%;
    * left: 0;
}

.content { *position:relative;
    * top: -50%;
    * left: 0;
}

        <div class="box">
            <div class="wrap">
                <p class="content">
                    我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行
                    <a href="http://www.xiaoqiang.org/css/text-wrap-and-vertical-align-center.html" title="固定宽度的文字自动换行并垂直剧中">固定宽度的文字自动换行并垂直剧中</a>
                </p>
            </div>
        </div>
        <div class="box">

            <div class="wrap">
                <p class="content">
                    是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行
                </p>
            </div>
        </div>

试试看：固定宽度的文字自动换行并垂直剧中

2011.10.10更新，参照http://sofish.de/1909修正IE7bug

上图来自第六届D2前端技术论坛王啟恩/Adam Wang的演讲稿，渐进增强的理念区别于优雅降级更加关注于内容，然后再锦上添花。

文件结构

根据模块化的思想，将目录划分为html，css，image三大部分。

css部署如图：

1. base.css放置的是reset，clearfix等基础类和工具类；
2. globa.css放置的是布局样式，包括header，footer等样式；
3.  mod文件夹下面放置的模块，组件的样式；
4. 如果是大型团队合作，建议将模块粒度分的更细，比如man-630模块建立一个文件夹，里面有一个mn630-base.css的基础类，然后其他子模块继承基础类做扩展；
5. 这里我们把main-630.css做成一个大模块，其他以此类推，例如dialog.css是弹出层模块，button.css是按钮模块。

html部署如图：

1. mod文件夹下面放的是模块的代码片段集合。如果有可能尽可能粒度划分的更细，因为这些都是代码片段，希望以后有工具做到代码片段和css的自动载入;
2. col-230-710.html是布局模块，已经完成了基础布局;
3. template文件夹下面放的是产出物，其实就是一些模块的拼合。只要模块写的够好这块工作就很好做了。

image部署如图：

1. 图片文件夹的部署和css部署是对应的，base和global的前景图和背景图放在base文件夹里面。
2. 用作例子的示例图片放在data里面比如，头像之类的
3. 第三方和icon放在icon的文件夹中
4. Mod文件夹中放的是模块所需要的前景图和背景图，小图标用sprite合并到base中

html5和css3

介绍一个html5工具，html5-boilerplate这个工具整合了js框架modernizr和Respond.js。modernizr是对浏览器支持html5和css做检测和对IE支持部分html5元素。Respond主要是让css支持min/max-width CSS3 Media Queries。简单的说html5-boilerplate就是一个可以让你的网站使用html5和css3在个平台和各终端（包括手机浏览器）都有不错表现的组合。有时间的同学可以看看，我也汉化过一部分，暂时还未全部完成。
国内有基于这个组合的应用，但是好像也未完全按照他的做法去实践，例如zhihu.com，yupoo.com
这次我并未选择这个框架，原因有两个（1）加入2个js框架成本太高。（2）采用
Modernizr的条件注释:

<!--[if lt IE 7]><html class="no-js ie ie6" lang="zh"><![endif]-->
<!--[if IE 7]><html class="no-js ie ie7" lang="zh"><![endif]-->
<!--[if IE 8]><html class="no-js ie ie8" lang="zh"><![endif]-->
<!--[if IE 9]><html class="no-js ie ie9" lang="zh"><![endif]-->
<!--[if gt IE 9]><html class="no-js" lang="zh"><!--<![endif]-->

相当于写在条件注释下的标签要多寻找一层名字空间，根据css类名是从又向左解析的原则，这会带来更大的开销。 我参考的解决方案：

<!--[if lte IE 8]>
<script src="js/html5.js"></script>
<![endif]-->

具体代码：

(function(){var html5_tag='section,article,aside,header,footer,nav,dialog,figure',arr=html5_tag.split(',');for(var i=arr.length;i--;){document.createElement(arr[i]);}})();

然后在样式上添加：

section, article, aside, header, footer, nav, dialog, figure {display: block; padding: 0; margin: 0;}

这样就能使IE678支持html5的标签了
css3的使用采用的仅仅限于

.radius10{
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}
.box-shadow112-999{
	-moz-box-shadow:1px 1px 2px #999;
	-webkit-box-shadow:1px 1px 2px #999;
	box-shadow:1px 1px 2px #999;
}
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.55);

为了尽可能保持视觉效果统一，没有使用html表单元素，例如input的type=”email”等，同时把chrome的焦点效果去掉了，同时把textarea的大小改变也去掉了，代码如下：

textarea {resize:none;}
input:focus,textarea:focus,select:focus {outline: none;}

命名规范和书写顺序
css规范：
文件命名根据所在模块，如：button.source.css；子模块则为button-submit.source.css，如果有可能，粒度划分尽可能细小；
模块类名则用mod-开头加上模块名，例如.mod-button相当于封装了一个button对象；
具体的元素就用mod对象的简写加上功能名，例如.bt-submit相当于继承了button的所有属性，html可能会像这样：<a class=”mod-button” href=”#”>提交</a>（注：这里的继承并非css的继承，而是模拟面向对象的继承）;
可能会有不同的提交按钮，可以在这个按钮的基类里面加上其他特色的样式或者是覆盖一些样式形成多态效果，例如加上.bt-submit-login，.bt-submit-reg; html可能会像这样：

<a class=”mod-button” href=”#”>登录提交</a>

<a class=”mod-button” href=”#”>注册提交</a>

完整的css文件可能会如下button.source.css

@charset"utf-8";
/**
 *name: button.css;
 *function: mod-button;
 *creator: xiaoqiang;
 *modify: none;
 *update-time: 2011-07-25;
**/
.mod-button{//button模块
		...
}
	.bt-submit{//submit基类
 		...
 	}
 		.sb-submit-login{//login派生类
 			...
 		}
 		.sb-submit-reg{//reg派生类
 			...
 		}

模块按照层级关系缩进，书写顺序推荐：

1. 影响文档流的属性（比如：display, position, float, clear, visibility, table-layout等）；
2. 自身盒模型的属性（比如：width, height, margin, padding, border等）；
3. 排版相关属性（比如：font, line-height, text-align, text-indent, vertical-align等）；
4. 装饰性属性（比如：color, background, opacity, cursor等）；
5. 生成内容的属性（比如：content, list-style, quotes等）。

base.source.css里面的东西：
首先是base里面有reset，重置元素的初始值；
然后是工具类，例如.clearfix,.tc{text-align:center;},.fl{float:left;}等等之类的；
接下来是通用值，例如.c999{color:#999},.mt10{margin-top:10px;}, .z10{z-index:10;}等等。
global.source.css里面的东西：
首先是grid相关的样式，如.w710{width:710px;} .wrap{width:960px;margin:0 auto;}等；
然后是header，footer这些通用模块的样式。
尽量采用合理的布局方式，减少hack出现的几率；尽可能采用OOP的思想编写模块，达到最大通用性和可维护性；浮动都必须清除；动态加载的数据建议采用脱离文档流布局，避免数据插入的时候渲染整个页面；其他参照yahoo最佳实践。
Html规范：
布局模块放在page根目录，例如col-960.html,col-710-230.html；
模块文件放在mod下，按照模块命名分文件夹，如mod/button.html；
如果粒度更细可以划分为mod/button/bt-login.html；
一个html页面初始化可能是这个样子：

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="description" content="">
        <title>demo</title>
		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="css/base.css" type="text/css" media="screen" />
		<!--[if lte IE 8]>
		<script src="js/html5.js"></script>
		<![endif]-->
    </head>
    <body>
    </body>
</html>

模块（mod）注释采用结束符注释风格，如

<div class="wrap">
</div><!--/.wrap-->

组装成的页面（template）注释采用双语，方便后台程序员对接页面，如

<!--wrap模块开始-->
<div class="wrap">
</div><!--/.wrap-->
<!--wrap模块结束-->

标签都用小写，都必须闭合，按照正确的嵌套原则，语义化的结构。尽量使用文字和代码来实现页面效果。
所有a标签都必须加上title，所有img标签都必须加上alt提示。前端开发是良心事业，为了照顾盲人朋友，请尽量遵守Guide to the Section 508 Standards for Electronic and Information Technology等可用性原则。有兴趣可以使用争渡读屏软件体验一下盲人上网的感觉。

发布相关

1. 把能合并的小图标合并成sprite
2. 把name.source.css的css源文件压缩成name.css
3. 页面使用minify等合并工具合并css

延伸阅读

1. (译)理解“渐进增强(Progressive Enhancement)”
2. 页面重构中的模块化设计系列文章
3. html5-boilerplate模板
4. 【译文】Modernizr——为HTML5和CSS3而生！
5. Respond.js: Fast CSS3 Media Queries for Internet Explorer 6-8 and more
6. 2011彩票首页开发实践
7. 第六届D2论坛主题演讲视频资料

感谢

1. 感谢产品经理对新技术的理解和对IE下直角，非半透明等各种效果的容忍；
2. 感谢领导对新的开发模式的信任；
3. 感谢同事对新模式的认可和建议，并和我一起完成了这个产品的实践。

[ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <’font-size’> [ / <'line-height'> ]? <’font-family’> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit

其中”|”表示2个或者多个属性里面必须选一个。”||”表示2个或者多个属性里面必须选1个或者多个。”?”表示前面的属性可以选或者不选”[]“为分组标记。
根据这个规则：
A=[ <'font-style'> || <'font-variant'> || <'font-weight'> ]?这三个属性可以不选或者多个+<’font-size’>必选项+[ / <'line-height'> ]? 可以选或者不选+<’font-family’>必选；
A | caption | icon | menu | message-box | small-caption | status-bar | inherit
其中写上一个。
由于写后面的属性都是浏览器自带的样式，一般不能满足我们的需求，所以大部分还是选择A。
A的缩写规则，最简短就是留下两个必须项：font-size+font-family
还有一个特殊情况就是，如果只简写了，其他属性会被置为默认值：font:normal normal normal font-size/normal font-family;

所以写在font定义之前的font-style，font-variant，font-weight，line-height都会被font默认属性覆盖。

1. 对非a标签添加伪类状态，例如span:hover{}。在采用偷天换日的手法a:hover span{}，解决IE6兼容只许添加一个a:hover{#:FFF;}触发IE6下a标签hover状态的haslayout即可。
2. 选项卡去掉虚线框，IE解决方案：<a href=”..” hidefocus=”true”>；FF下解决方案：a:focus {outline:none;-moz-outline:none;}
3. 内联元素居中水平采用父元素text-align:center;垂直采用height=line-height；块级元素水平居中自身margin：0 auto;text-align:left（对子内联元素不入侵）父元素text-align:center;块级元素可以采用text-indent调解左边距，比padding-left的好处在与不会影响固定宽度值
4. 小图片存为gif文件比png-8要小，但是像css sprites这种颜色种类不多的大图片存为png-8要比gif要小，而且今天在蓝色理想看到别人用position做css sprites，还有人提出img sprites的想法，都很不错
5. 内联元素用display:inline-block;比较给力，IE6下虽然不支持这个属性，但是会触发内联元素的haslayout，所以表象一样。块级元素就不行了
6. 内联元素float:left;之后按理说应该表现为块级，但是文字在IE6和IE7下会填充上一行的空隙。解决方案white-space: pre;
7. IE6下当高度小于font-size的时候，会被撑高。解决方案：font-size:1px;
8. css在浏览器渲染过程中是从右向左读取的，尽量不用名字空间约束样式名，尽量不对元素直接写样式。