工作多年了，一直不爱讲规范，因为凭自己经验做出来的东西不会有太多乱子，但是从开始进行项目管理以来，发现没有规矩真会出问题，
所以经过两个中小型项目，自己做了些总结，希望能和看到此文的朋友讨论，如果您有任何看法或者建议，可以留言指正、补充，也可以邮件到
28181305#qq.com，谢谢。
所以总结前台UI开发相关的必须预订的几个项目：
1 一个所有页面都包含一个php文件，这个php文件去链接css需要的样式表文件，不允许出现其它对样式表文件的引用的出现
—— 因为样式表文件太多，会增加http请求次数，而且不同的文件出现相同的class名字也会引起冲突，修改时会导致顾此失彼；放在一个动态的php文件之后，如果用户可选皮肤也可以在此文件中实现，整个项目都只需要关注少数的1-2个css文件即可。
2 项目开始之初，首相要做的是在css文件的最前面规定div,input、p、span、td、a（html tag）的字体大小、行间距、文字的颜色、边距；input、textarea的边框样式；table tr td的样式；a的文字颜色、鼠标经过文字颜色；其它任何地方不得再次定义这些html tag的样式（换言之对html的样式的定义只能出现在css文件的最前面）
3 接着定义几种标题格式——包括文字大小、文字颜色、是否加粗、边框样式、背景图片、高度，所有的标题只允许使用这几种样式
4 各种列表页面的翻页的样式——包括翻页链接的文字大小、文字颜色、边框样式、内边距、外边距，所有的翻页全部使用这个样式
5 定义一个用于筛选条件的tab的样式（选中状态、非选中状态、基本样式）的文字颜色、文字大小、高度、行高、内外边距、文字位置，所有的筛选都只使用这个样式。
6 定义几个按钮类如：button_green button_red button_gray button_hilight，所有按钮性质的东西，只允许用这几个类，或者用浏览器自己的input，禁止自定义按钮样式。
7 对于文内容的内边距要注意保持一致，在项目最初就规定上边距，开发过程当中禁止开发人员自行定制内外边距，也就是禁止规定margin和padding
8 所有图标的高度与line-height或者与文字大小，避免图标与文字不对齐。
9 按钮背景图、标题背景图、图标全部使用textpacker打包成单个图片文件。
后端规范：
1 文件名、目录名、变量名及数据库表名、字段名，一律使用小写字母，单词之间下划线分隔：new_rows,user_name
2 类名函数名，首字母小写，后面的每个单词首字母大写：newRows，userName
3 所有文件使用utf8编码
4 SQL语句关键词一律大写：SELECT id,name FROM user
5 所有用户参数:$_GET、$_POST、$_COOKIE、$_FILES['col']['name']一律不得直接使用，期望是数字的一律用intval转换，期望是字符串的一律至少使用safestr（自定义函数）过滤：$id=intval($_GET['id']);$name=safestr($_GET['name']);
6 文件上传，不得使用$_FILES['col']['name']中的任何部分，必须全部自己构建存储路径和文件名:
$path_parts = pathinfo($_FILES['col']['name']);
if($path_parts["extension"]=='png')
$filename=$user_id.'.png';
else if($path_parts["extension"]=='jpg')
$filename=$user_id.'.jpg';
else
$filename=$user_id.'.gif';
7 jq绑定事件必须使用dom的id，禁止使用selector，如$('p[class=cls1]').bind(...，应该使用$('#p_cls1').bind，原因在于修改时直接查找p_cls1就可以找到绑定的函数，并且效率更好。
8 mysql字段不要使用datetime或者time，用int类型来表示时间
9 表的自增id字段一律用id，不要使用tablename_id，这样不方便写一些自动化程序。
10 js函数尽量根据功能个性化，比如不要使用add,update,post这样的函数名，这种名字容易冲突，为了减少http请求次数，需要合并js时，遇到冲突就很难搞定，应该使用news_add,news_update,product_post这样的名字
付一个css基础文件，由于时间关系没有完成：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基础样式及预览</title>
<link rel="stylesheet" href="css.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
</head>
<style>
*{word-break: break-all}
/* html tag 定义开始 */
td,a,input,div,span,p{
font-size: 12px;
line-height: 18px;
margin: 0px;
padding: 0px;
margin: 0px;
color: #EFEFEF;
}
a{
color: blue;
text-decoration: none;
}
a:hover{
color: red;
}
/* 列表类定义开始 */
table{}
tr{}
th{}
ul{}
li{}
/* --------------------------------------- */
/* 容器类定义开始 */
.main{width:100%; margin: 0 auto;font-size:12px}
.container{width:1000px; margin:0 auto;}
.right,.middle,.left{padding-left:12px;padding-right:12px; float: left}
.left{width:116px;}
.middle{width:576px;}
.right{width:136px;}
.content{}
.content_main{}
/* --------------------------------------- */
/* 标题类定义开始 */
.title_color01{}
.title_color02{}
.title_picture01{}
.title_picture02{}
.tilte_of_section{}
/* --------------------------------------- */
/* 标题类定义开始 */
.button_green{}
.button_red{}
.button_gray{}
.button_hilight{}
/* --------------------------------------- */
/* 分页类定义开始 */
.page{}
.page .head{padding-left:12}
.page a{}
.page .current{}
.page .end{}
/* --------------------------------------- */
/* TAB切换类定义开始 */
.tab{}
.tab .normal{}
.tab .active{}
/* --------------------------------------- */
</style>
<body>
<div class="main">
<div class="container">
<div class="left">
<div class="title_color01">阅读排行</div>
<div class="content">
</div>
<div class="title_picture01">活跃用户</div>
<div class="content">
</div>
</div>
<div class="middle">
<div class="title_color01"></div>
<div class="content content_main"></div>
<div class="title_color01"></div>
<div class="content">
<div class="tilte_of_section">填写信息</div>
<div class="form">
</div>
<div>
<a class="button_green">提交</a>
<a class="button_gray">重置</a>
</div>
<div class="tab">
<div class="active"></div>
<div class="normal"></div>
</div>
<div class="content_main">
<div class="page">
<a class="head">首页</a>
<a>第三页</a>
<a class="current">第四页</a>
<a>第五页</a>
<a class="end">末页</a>
</div>
</div>
<div class="content_main">
</div>
</div>
</div>
<div class="right">
<div class="title_color01"></div>
<div class="content"></div>
<div class="title_picture01"></div>
<div class="content"></div>
</div>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号