在开发过程中，随着UI和交互的变化，前端这些文件变得异常难以维护，主要是因为新的需求出现而一般我们总是无法摒弃原来的方案而导致不断地兼容，那有没有一些好的方法来管理组织这些文件呢？
css篇
css的基本规范
1.根据项目新建3种类型样式。 全站样式，产品样式，页面样式。
全站样式需要放在所有css引用的最前面。它包括：标签样式重置，链接，字体，清楚浮动，布局，模块等等
产品样式指某一个业务（比如车务，门户，论坛等），文件放在css/下相应的目录下。
页面样式指仅在一个或少量几个页面中用到，该文件再放到相应的产品目录下。
2.css尽可能的通过封装，继承。 请参见 css模块化
3.不要轻易改动全站样式。改动后，要经过全面测试
4.单条CSS规则的书写格式要求
4-1. 属性需要写在一行。需要在“{“和”}”前后加空格。
.selector { property:value;property:value; }
4-2. 多个(>2)selector每个占一行：
.selector1,
.selector2,
.selector3 { property:value;property:value; }
4-3. 兼容多个浏览器时，将标准属性写在后面，如：
-webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
5. 将作用于不同模块的CSS规则集中放在一起，同时用注释说明
6. ID和Class命名。命名不要用缩写，单词间用”-”做为连接符
6-1. ID是用来标识具体模块，命名必须具体且唯一，由前缀和名字组成。不要滥用ID。如： #db-video-list。
6-2. Class是用来标识某一类型的元素，命名简洁表意清楚。如：.list。
6-3. 命名示例， 坏：#rec.gray-link.broadsmr.pl好：#db-nav-main.infobox.item
6-4. 推荐使用的class名：
表示状态 .on, .active, .selected, .hili
表示位置 .first, .last, .main, .side
表示结构 .hd, .bd, .ft, .col, .section
通用元素 .tb, .frm, .nav, .list, .item, .tag, .pic, .info
7. 尽量避免使用CSS Hack
推荐使用下面的：区别属性：
IE6 _property:value
IE6/7 *property:value
IE6/7/8/9 property:value9
非IE6 property//:value
区别规则：
IE6 * html selector { … }
IE7 *:first-child+html selector { … }
非IE6 html>body selector { … }
8. 使用after或overflow的方式清浮动
9. 内联和外联的CSS都必须放在页面的head里。顺序是：全站级CSS，产品级CSS，页面级(外联)CSS，页面级(内联)CSS，内联CSS
10. 避免使用低效的选择器
如：body > * {…}ul > li > a {…}#footer > h3 {…}ul#top_blue_nav {…}#searbar span.submit a { … }
11. 不要直接修改标签的样式
如： div { … }
12. 不要在标签上直接写样式
如：<div style=”margin-bottom:30px;”>
13. 尽量避免使用filter(滤镜)
14. 不要在CSS中使用 expression(表达式)
15. 不要在CSS中使用 @import
16. 不要在CSS中使用 !important
17. 绝对不要在CSS中使用 “*” 选择符
img篇
图片的管理比较简单，先把通用的图片放在image/common文件夹中，其他的图片都按照模块建文件夹分类；图片一般保存为png-8格式。
js篇
Javascript命名规则
1. 函数名的首字母大写。如：
function Dialog (config) {
statement;
}
var dlg = new Dialog({…});
2. 对象的属性或方法名采用小驼峰式(lower camel-case)，如"init", "bindEvent", "updatePosition"：
Dialog.prototype = {
init: function () {},
bindEvent: function () {},
updatePosition: function () {}
…
};
3. 私有变量名用下划线开头。如："_current", "_defaultConfig"
4. 常量名全部大写，单词间用下划线分隔。如：“CSS_BTN_CLOSE”, "TXT_LOADING"
5. 变量名的前缀：
|
Prefix |
Element |
Example |
|
n |
integer |
nVariableName |
|
i,j,k,m,n, etc. * |
integer as counter/iterator |
(for i=0; i<=oArray.length; i++) |
|
s |
string |
sVariableName |
|
o |
object |
oObjectName |
|
is, can, has |
boolean |
[Boolean name]ConditionName |
|
event method |
event attachment |
[event type]_MethodName |
|
get |
accessor method |
getMethodName |
|
set |
accessor method |
setMethodName |
代码格式化要求
1. 语句中的必要空格和缩进
1-1. 用来包含语句的"()"前后需要跟空格，诸如： if / for / while / switch ( statements ) { … } 等
1-2. "="前后需要跟空格
1-3. 数组成员间的","后面需要跟空格
2. 长语句采用断行
javascript部署规则
javascript类型分为4种级别： 全站级，模块级，产品级，页面级。
未完待续。。。