【写在规则前面的话】
项目的可维护性第一。你不是一个人在做事，项目的维护和二次开发可能是直接的或间接的团队合作。好的可维护性，从四个方面下手：
1）代码的松耦合，高度模块化，将页面内的元素视为一个个模块，相互独立，尽量避免耦合过高的代码，从html,css,js三个层面都要考虑模块化。
2）良好的注释。
3）注意代码的弹性，在性能和弹性的选择上，一般情况下以弹性为优先考虑条件，在保证弹性的基础上，适当优化性能。
4）严格按照规范编写代码。
【命名规则】
为避免命名冲突，命名规则如下：
1）公共组件因为高度重用，命名从简，不要加前缀；
2）各栏目的相应代码，需加前缀，前缀为WD姓名拼音的首字母，例如：杰夫前缀为“jf_”，分隔符为下划线“_”，例如：“jf_imgList”;
3）模块组件化，组件中的class或id名采用骆驼命名法和下划线相结合的方式，单词之间的分隔靠大写字母分开，从属关系靠下划线分隔。例如：
html:
<ul class=”textList”>
<li class=”textList_firstItem”>1)XXXXXXXXXXXXXX</li>
<li>2)XXXXXXXXXXXXXX</li>
<li>3)XXXXXXXXXXXXXX</li>
</u1>
css:
.textList{ }V .text_list X
.textList_firstItem{ } V .textListFirstItem X
4）命名清晰，不怕命名长，怕命名容易冲突，长命名可以保证不会产生冲突，所以css选择时可以尽量不使用子选择符，也能确保css优先级权重足够低，方便扩展时的覆盖操作：
.textList_firstItem{ } V .textList .firstItem{ }X
5) 命名要有意义，不要使用没有意义的命名。用英语命名，不要用拼音。
【分工安排】
1)分工原则为公共组件（包括common.css和public.JS）一人维护，各栏目其他人负责，每个栏目正常情况下一人负责，要详细写明注释，如果多人合作，维护的人员注意添加注释信息，具体注释细则，详见注释规则；
2)VD设计完设计图后，先和交互设计师沟通，确定设计可行，然后先将设计图给公共组件维护者，看设计图是否需要提取公共组件，然后再提交给相应栏目的WD。如果有公共组件要提取，公共组件维护者需对栏目WD说明。
3)如果确定没有公共组件需提取，交互设计师直接和各栏目的WD交流，对照着VD的设计图进行说明，WD完成需求；
4)WD在制作页面的时候，需先去common文件中查询是否已经存在设计图中的组件，如果有，直接调用；没有，则在app.css和app.JS中添加相应的代码。
5)WD在制作过程中，发现有高度重用的模块，却未被加入到公共组件中，需向公共组件维护人进行说明，然后工作组件维护人决定是否添加该组件。如果 确定添加，则向WD们说明添加了新组件，让WD们检查之前是否添加了类似组件，统一更新成新组件的用法，删除之前自定义的css和js。虽然麻烦，但始终 把可维护性放在首位。
6)公共组件维护者的公共组件说明文档，需图片和说明文字配套，方便阅读。
【注释规则】
1.公共组件维护者和各栏目WD都需要在文件头部加上注释说明：
/**
*文件用途说明
*作者姓名、联系方式（旺旺）
*制作日期
**/
2.大的模块注释方法：
//================
// 代码用途
//================
3.小的注释；
//代码说明
注释单独一行，不要在代码后的同一行内加注释。
例如：
//姓名
var name = “abc”; V
var name =”abc”; //姓名 X
4.维护人员的注释方法：尽量根据注释说明，找到代码的原作者，让原作者进行维护，原作者进行维护可以无需添加额外说明，直接进行修改。如果因为特殊原因，无法让原作者进行维护，需添加额外说明进行注释。说明文字为：“/*change by xxx) 原代码如下：
<{源代码}>.新代码如下:*/
新代码：
如：var name = “abc”;这段代码，要将name由“abc”变成“123”，原作者可直接改var name=”123”;非原作者修改，需改成：
/*(change by 杰夫) 原代码如下：<{
var name = “abc”;
}>新代码如下：*/
var name =”123”;
修改时添加的注释，在项目通过测试之后，上线前，可以优化掉。
【HTML规范】
1)DTD统一用<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">。
2)统一utf-8编码。
3)html,css,js缩进统一使用tab键。
4)标签名，属性名全部小写，属性需加引号，单标签需闭合，例如<hr> V. <hr /> X.
5)html应在保证弹性的基础上尽量减少嵌套层数。
6)严格区分做为内容的图片和做为背景的图片。做为背景的图片采用css
sprite技术，放在一张大图里。大图的安排也遵从common+app的方式，全站彩的图片告之公用组件维护者，添入common.gif中，各栏目
的图片，各WD各自拼命到app.gif中。Css
sprite技术的优点是减少了http请求数，但使图片面性css的background-position耦合度增加了，增加了维护成本。如果图片有
修改，不要删已添加的图片，在空白处新增修改后的图片，减小修改的风险。
7)标签语义化，webdevelper去样式可读性良好。
8)方便程序员配程序，html需为模块添加注释。格式为<!--something开始{-->XXXXXX<!--}something结束-->。例如：
<!--头部开始{-->
<div class="head">
<div class="header clearfix">
<h1 class="fr">站长天下</h1>
<h2 class="fb fl">阿当测试站点<span class="gray fn">的页面管理模式</span></h2>
<input type="button" value="完成并退出" class="ml50 fl" />
</div>
</div>
<!--}头部结束-->
【css规范】
1)css Reset 用YUI的css Reset；
2)css采用cssReset+common.css+app.css的形式；
3)app.css采用分工制，一个WD负责一个栏目，如果多人维护，需要添加诠释；
4)为方便组件模块化和提高弹性，正常情况下，为避免外边界冲突，组件不设置外边界，外边界用组合css的方式实现，例如：
html:
<p>12345</p>
<ul class="textList">
<li>1)XXXXXXXXXXX</li>
<li>2)XXXXXXXXXXX</li>
</ul>
<p>abcde</p>
<ul class="textList2">
<li>1)XXXXXXXXXXX</li>
<li>2)XXXXXXXXXXX</li>
</ul>
css:
.textList,.textList2{margin-top:10px;XXXXXXXXXXXXXX}
.textList2{margin-top:20px;}
X
=====================================================
html:
<p>12345</p>
<ul class="textList marginTop10">
<li>1)XXXXXXXXXXX</li>
<li>2)XXXXXXXXXXX</li>
</ul>
<p>abcde</p>
<ul class="textList marginTop20">
<li>1)XXXXXXXXXXX</li>
<li>2)XXXXXXXXXXX</li>
</ul>
css:
.textList{XXXXXXXXXXXXXX}
.marginTop10{margin-top:10px;}
.marginTop20{margin-top:20px;}
V
5)为避免组件的上下外边距重合问题和IE的haslayout引发的bug,各模块除特殊需求，一律采用marginTop设置上下外边距，例如：
<p>XXXXXXXXXXXXX</p>
<p class="marginTop10 marginBottom10">XXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXX</p>
X
=====================================================
<p>XXXXXXXXXXXXX</p>
<p class="marginTop10">XXXXXXXXXXXXX</p>
<p class="marginTop10">XXXXXXXXXXXXX</p>
V
6)优先组合已存在的common.css中的类进行组合，减少自定义类的数量。
7)css用一行的写法，避免行数太长，不利查找。例如：
.menu{margin:0;float:left;font-weight:bold;} V
.menu{
margin:0;
float:left;
font-weight:bold;
} X
【js规范】
1)底层JS库采用YUI 2.6.0；
2)统一头部中只载入YUI load组件，其他组件都通过loader对象加载；
3)js尽量避免使用全局变量，复杂应用写成组件，通过构造函数实现多态，写在公共组件或外部js中，简单应用直接写在init函数中，通过命名空间或匿名函数将变量包进闭包中。
