九大原则
原则一：一般要写兼容IE6,IE7和FIREFOX的网页，最省事的方法就先写适合IE7的样式，因为IE7和FIREFOX很接近，这样判断浏览器兼容的工作量就能减小到最少。
原则二：逐步叠加的方式，如果需要用这个样式的模块很多，并且会存在些许的不同，千万不要把样式一步写到位，最好把框架性的先写好，细节性的留到第二个步骤，甚至第三个步骤，当然最好步骤不要超过三步，这样很不利于维护。由若干个二级定义对一级定义进行补充，这样的既可以减少代码，又可以减少繁多的CLASS命名。
原则三：从总到分。顺序应该是这样：总体需要用到的>>结构>>模块>>二级模块>>细节；并且这个文档最不容易修改的处于最上端，频繁用于修改的在末端。最忌讳即兴发挥，这样写出的东西经不起推敲，稍有变化就要忙得乱成一团。结构性的东西应该慎重精细。
原则四：尽量把能够放在一组的小图标或者图片放在一个图片文件里，这样的好处有很多。
1、 图片文件的总量会变小；
2、 利于下载，太多的小图片下载效果是不理想的，常常会发现这个图片出来，那个没出来，这样在写样式的时候只需要写一个总体的，对于具体的要显示的只需要标一个位置，非常省时间，样式也很精炼；
3、 显而易见，这样做非常便于管理，替换或新增的时候工作量很小。
原则五：切图的原则，应该切大的图绝不切小，应该切小的绝不切大，能够用颜色代替的绝不切图。把一个大图切成很多份并不一定能够加快页面的显示速度，相反会浪费很多不必要的带宽。不光要控制图片文件的多少，还要考虑到这样切会不会造成页面增加许多额外的代码。
原则六：图片的命名规则，定一个规则，准备用一辈子。这样以后你看CSS文档的时候，你只要看到某个图片名称的时候，你不需要看太多你就知道这个图片的用途、位置；这样可以最大限度的保证样式的重用性。
原则七：在该不该用表格的问题上，我的态度是，涉及多行多列的特别是列宽有不固定的，坚决用表格，这个没啥好讨论的，千万不要为了DIV而DIV，用一大陀CSS去模仿一个表格是很极端的行为。当然也有例外的，需要灵活处理，但千万别模仿什么表格。
原则八：尽可能不把样式直接写到元素的标签里（除非这个样式出现的机率特别小，有相当程度的偶然性），把样式直接写到元素标签里是一种工作范畴意义上的无政府行为，非常不负责。
原则九：尽量不要用ID来定义或索引样式，ID的唯一性比较高，且用ID索引样式效率非常低而且兼容性的问题也比较明显。
总之所有的一切都为了精简，为了效率，也为了重用。
页面规范
样式和程序不一样，样式主要是为了界面呈现，因此样式的命名和界面的表现是紧密联系在一起的。这边我主要写一个放大的结构，基本上这个结构会满足90%的需求。但是如果要做到精炼，还是要根据具体的需求来调整，避免过多的冗余。
1. 文件定义：必须是
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
2. 全局包括：字符编码，文字大小，字体，背景，行距；链接最好不要放到全局里定义，IE6环境下会有奇怪的问题；
3. 公用的包括：button（按钮），input（输入框），textArea（文本域），space（间隔）；
4. 根据页面的结构，页面大致分为五个部分：顶部、左栏、中栏、右栏、底部；CLASS的名称分别定义为：top, left, middle, right, bottom ；
5. divBtn, divBtnL, divBtnM, divBtnR（DIV模拟按钮），menu, menuL, menuM, menuR（菜单）
<div class="divBtn">
<div class="divBtnL"></div>
<div class="divBtnM">默认</div>
<div class="divBtnR"></div>
</div>
<div class="divBtnOv">
<div class="divBtnL"></div>
<div class="divBtnM">悬停</div>
<div class="divBtnR"></div>
</div>
<div class="divBtnSe">
<div class="divBtnL"></div>
<div class="divBtnM">选中</div>
<div class="divBtnR"></div>
</div>
<div class="divBtnSv">
<div class="divBtnL"></div>
<div class="divBtnM">选中状态下悬停</div>
<div class="divBtnR"></div>
</div>
由父节点直接控制子节点，菜单的四种状态和divBtn类似，divBtn的结构也可以是完全嵌套型的，节点相应地可以增减，视需求而定，但是CLASS的定义不变。
6. 分页的基本结构。
<div class="pager">
<a class="pageFir" href="javascript:;"> </a><!--首页-->
<a class="pagePre" href="javascript:;"> </a><!--上一页-->
<span class="pageNum">
<a class="pageSe" href="javascript:;">1</a><!--选中页-->
<a href="javascript:;">2</a>
<a href="javascript:;">3</a>
<a href="javascript:;">4</a>
<a href="javascript:;">5</a>
</span>
<a class="pageNxt" href="javascript:;"> </a><!--下一页-->
<a class="pageLst" href="javascript:;"> </a><!--末页-->
<span class="pageIpt"><input maxLength="3" value="" /></span><!--跳转框-->
<a class="pageBtn" href="javascript:;"> </a><!--跳转按钮-->
</div>
注：“ ”不可以省略。
7. 页面是由模块组成，模块的基本结构是一个九宫格（这个九宫格的结构和网上的说法不太一样，有多种变化，但我们样式的命名不变）：modTL, modTM, modTR, modML, modMM, modMR, modBL, modBM, modBR.。弹出框的基础结构也是由九宫格组成：optTL, optTM, optTR, optML, optMM, optMR, optBL, optBM, optBR.。
<div class="mod mod2 …"><!--这里可以附加更多CLASS来改变整体的表现-->
<div class="modTL"></div><!--这里可以插入图标-->
<div class="modTM"></div><!--这里可以插入标题-->
<div class="modTR"></div><!--这里可以插入操作按钮-->
<div class="modML">
<div class="modMM">
<div class="modMR"></div>
</div>
</div>
<div class="modBL"></div>
<div class="modBM"></div>
<div class="modBR"></div>
</div>
弹出框和mod的结构一致
8. 表格，基本上我们定义表格也会依照最直观的方式给它定义样式。如例：
<table border="0" cellpadding="0" cellspacing="0" class="table">
<tbody>
<tr class="th">
<td class="td1">名称</td>
<td class="td3">改名</td>
<td class="td3">删除</td>
</tr>
<tr class="tr">
<td class="td1">名称</td>
<td class="td3">改名</td>
<td class="td3">删除</td>
</tr>
<tr class="trOv">
<td class="td1">名称</td>
<td class="td3">改名</td>
<td class="td3">删除</td>
</tr>
<tr class="trSe">
<td class="td1">名称</td>
<td class="td3">改名</td>
<td class="td3">删除</td>
</tr>
</tbody>
</table>
注：tbody绝对不可以省略。不要对这样的命名表示不理解，正如我先前所说，CLASS和程序不一样，样式最大的优越性是可以无限制地公用，并且可以通过父级控制各种呈现。因此定义的名称不要和具体的目标联系起来，不要管它用来做什么，你只要知道它是个什么就够了。
9. 组合规则
a) 元素的界面呈现状态分为四种：默认、悬停、选中、选中的悬停状态。如有个CLASS名称叫“xx”，那它的四种状态分别为：xx, xxOv, xxSe, xxSv 。
b) 如果写一个结构，这个结构具有一定意义上的公用性和广泛性，那我们在定义CLASS名称的时候就要考虑这组样式的名称的统一，如：menu, menuL, menuM, menuR。
10. HTML元素的排序规则，一般我们使用的HTML元素包括：div, p, ul, table, span, input, select。基本上div, table, ul, p都属于结构性比较强的元素，而span, input则是比较弱的元素，因此不允许有span嵌套div, table等等的情况出现，span可以嵌套input, 可以嵌套span。程序员在写页面的时候可以先不考虑界面呈现，按照这样的规则，把数据直接绑定到HTML元素的节点上。
原则一：一般要写兼容IE6,IE7和FIREFOX的网页，最省事的方法就先写适合IE7的样式，因为IE7和FIREFOX很接近，这样判断浏览器兼容的工作量就能减小到最少。
原则二：逐步叠加的方式，如果需要用这个样式的模块很多，并且会存在些许的不同，千万不要把样式一步写到位，最好把框架性的先写好，细节性的留到第二个步骤，甚至第三个步骤，当然最好步骤不要超过三步，这样很不利于维护。由若干个二级定义对一级定义进行补充，这样的既可以减少代码，又可以减少繁多的CLASS命名。
原则三：从总到分。顺序应该是这样：总体需要用到的>>结构>>模块>>二级模块>>细节；并且这个文档最不容易修改的处于最上端，频繁用于修改的在末端。最忌讳即兴发挥，这样写出的东西经不起推敲，稍有变化就要忙得乱成一团。结构性的东西应该慎重精细。
原则四：尽量把能够放在一组的小图标或者图片放在一个图片文件里，这样的好处有很多。
1、 图片文件的总量会变小；
2、 利于下载，太多的小图片下载效果是不理想的，常常会发现这个图片出来，那个没出来，这样在写样式的时候只需要写一个总体的，对于具体的要显示的只需要标一个位置，非常省时间，样式也很精炼；
3、 显而易见，这样做非常便于管理，替换或新增的时候工作量很小。
原则五：切图的原则，应该切大的图绝不切小，应该切小的绝不切大，能够用颜色代替的绝不切图。把一个大图切成很多份并不一定能够加快页面的显示速度，相反会浪费很多不必要的带宽。不光要控制图片文件的多少，还要考虑到这样切会不会造成页面增加许多额外的代码。
原则六：图片的命名规则，定一个规则，准备用一辈子。这样以后你看CSS文档的时候，你只要看到某个图片名称的时候，你不需要看太多你就知道这个图片的用途、位置；这样可以最大限度的保证样式的重用性。
原则七：在该不该用表格的问题上，我的态度是，涉及多行多列的特别是列宽有不固定的，坚决用表格，这个没啥好讨论的，千万不要为了DIV而DIV，用一大陀CSS去模仿一个表格是很极端的行为。当然也有例外的，需要灵活处理，但千万别模仿什么表格。
原则八：尽可能不把样式直接写到元素的标签里（除非这个样式出现的机率特别小，有相当程度的偶然性），把样式直接写到元素标签里是一种工作范畴意义上的无政府行为，非常不负责。
原则九：尽量不要用ID来定义或索引样式，ID的唯一性比较高，且用ID索引样式效率非常低而且兼容性的问题也比较明显。
总之所有的一切都为了精简，为了效率，也为了重用。
页面规范
样式和程序不一样，样式主要是为了界面呈现，因此样式的命名和界面的表现是紧密联系在一起的。这边我主要写一个放大的结构，基本上这个结构会满足90%的需求。但是如果要做到精炼，还是要根据具体的需求来调整，避免过多的冗余。
1. 文件定义：必须是
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
2. 全局包括：字符编码，文字大小，字体，背景，行距；链接最好不要放到全局里定义，IE6环境下会有奇怪的问题；
3. 公用的包括：button（按钮），input（输入框），textArea（文本域），space（间隔）；
4. 根据页面的结构，页面大致分为五个部分：顶部、左栏、中栏、右栏、底部；CLASS的名称分别定义为：top, left, middle, right, bottom ；
5. divBtn, divBtnL, divBtnM, divBtnR（DIV模拟按钮），menu, menuL, menuM, menuR（菜单）
<div class="divBtn">
<div class="divBtnL"></div>
<div class="divBtnM">默认</div>
<div class="divBtnR"></div>
</div>
<div class="divBtnOv">
<div class="divBtnL"></div>
<div class="divBtnM">悬停</div>
<div class="divBtnR"></div>
</div>
<div class="divBtnSe">
<div class="divBtnL"></div>
<div class="divBtnM">选中</div>
<div class="divBtnR"></div>
</div>
<div class="divBtnSv">
<div class="divBtnL"></div>
<div class="divBtnM">选中状态下悬停</div>
<div class="divBtnR"></div>
</div>
由父节点直接控制子节点，菜单的四种状态和divBtn类似，divBtn的结构也可以是完全嵌套型的，节点相应地可以增减，视需求而定，但是CLASS的定义不变。
6. 分页的基本结构。
<div class="pager">
<a class="pageFir" href="javascript:;"> </a><!--首页-->
<a class="pagePre" href="javascript:;"> </a><!--上一页-->
<span class="pageNum">
<a class="pageSe" href="javascript:;">1</a><!--选中页-->
<a href="javascript:;">2</a>
<a href="javascript:;">3</a>
<a href="javascript:;">4</a>
<a href="javascript:;">5</a>
</span>
<a class="pageNxt" href="javascript:;"> </a><!--下一页-->
<a class="pageLst" href="javascript:;"> </a><!--末页-->
<span class="pageIpt"><input maxLength="3" value="" /></span><!--跳转框-->
<a class="pageBtn" href="javascript:;"> </a><!--跳转按钮-->
</div>
注：“ ”不可以省略。
7. 页面是由模块组成，模块的基本结构是一个九宫格（这个九宫格的结构和网上的说法不太一样，有多种变化，但我们样式的命名不变）：modTL, modTM, modTR, modML, modMM, modMR, modBL, modBM, modBR.。弹出框的基础结构也是由九宫格组成：optTL, optTM, optTR, optML, optMM, optMR, optBL, optBM, optBR.。
<div class="mod mod2 …"><!--这里可以附加更多CLASS来改变整体的表现-->
<div class="modTL"></div><!--这里可以插入图标-->
<div class="modTM"></div><!--这里可以插入标题-->
<div class="modTR"></div><!--这里可以插入操作按钮-->
<div class="modML">
<div class="modMM">
<div class="modMR"></div>
</div>
</div>
<div class="modBL"></div>
<div class="modBM"></div>
<div class="modBR"></div>
</div>
弹出框和mod的结构一致
8. 表格，基本上我们定义表格也会依照最直观的方式给它定义样式。如例：
<table border="0" cellpadding="0" cellspacing="0" class="table">
<tbody>
<tr class="th">
<td class="td1">名称</td>
<td class="td3">改名</td>
<td class="td3">删除</td>
</tr>
<tr class="tr">
<td class="td1">名称</td>
<td class="td3">改名</td>
<td class="td3">删除</td>
</tr>
<tr class="trOv">
<td class="td1">名称</td>
<td class="td3">改名</td>
<td class="td3">删除</td>
</tr>
<tr class="trSe">
<td class="td1">名称</td>
<td class="td3">改名</td>
<td class="td3">删除</td>
</tr>
</tbody>
</table>
注：tbody绝对不可以省略。不要对这样的命名表示不理解，正如我先前所说，CLASS和程序不一样，样式最大的优越性是可以无限制地公用，并且可以通过父级控制各种呈现。因此定义的名称不要和具体的目标联系起来，不要管它用来做什么，你只要知道它是个什么就够了。
9. 组合规则
a) 元素的界面呈现状态分为四种：默认、悬停、选中、选中的悬停状态。如有个CLASS名称叫“xx”，那它的四种状态分别为：xx, xxOv, xxSe, xxSv 。
b) 如果写一个结构，这个结构具有一定意义上的公用性和广泛性，那我们在定义CLASS名称的时候就要考虑这组样式的名称的统一，如：menu, menuL, menuM, menuR。
10. HTML元素的排序规则，一般我们使用的HTML元素包括：div, p, ul, table, span, input, select。基本上div, table, ul, p都属于结构性比较强的元素，而span, input则是比较弱的元素，因此不允许有span嵌套div, table等等的情况出现，span可以嵌套input, 可以嵌套span。程序员在写页面的时候可以先不考虑界面呈现，按照这样的规则，把数据直接绑定到HTML元素的节点上。