WEB前端开发规范
一、文件命名规范
images //图片资源，如果项目多人开发里面还需要用子文件夹分开
fonts //字体资源，一般就是特殊字体嵌入或者图标字体
styles //CSS文件
- app.css //reset样式,如果项目小直接写在里面，如果多人开发则需要分开如：app.xxx.css
- app.a.css
- app.b.css
scripts //javascripts
- jquery.js
- app.js //主程序
videos //视频
sounds //音频
index.html //HTML文件
注：所有文件夹以及文件名都是小写，编码都均采用UTF-8编码
二、书写规范
1.所有HTML标签都必须使用小写。
2.CSS能用id的尽量用id，能复用的要使用class。
3.样式文件要在head标签内，脚本要再底部。
4.如果页面图片量很多，要使用JS脚本按需动态加载。
5.如果要兼容retina屏幕要使用 srcset和-webkit-image来设置2x质量图片。
6.如果文档模式是<!doctype html>可以不用写<br />中的斜杠。（当然包含其他无内容tag）
7.引用脚本和者样式去掉type属性，能节省一点是一点。
8.不管是HTML还是CSS或是JS都需要写注释，代码不仅要自己看得懂，让别人看得懂也很重要。
9.开发的时候CSS不要堆在一行编写，等项目完全编写完后再用压缩工具整体压缩。
10.编写JS的时候开始大括号要跟在语法后面不要另起一行，JS命名方式采用驼峰。
function isEmail(){ //do something....}
11.切图的时候如果是全彩图片则使用jpg格式且用80%质量，如果带有透明要使用png24格式。
12.书写链接地址时, 必须避免重定向，例如：href=”http://jinzhe.net/”, 即须在URL地址后面加上“/”。
13.在页面中尽量避免使用style属性,即style=”…”。
14.给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能。
15.能以背景形式呈现的图片, 尽量写入css样式中。
16.重要图片必须加上alt属性; 给重要的元素和截断的元素加上title。
17.CSS属性书写顺序, 建议遵循: 布局定位属性-->自身属性-->文本属性-->其他属性. 此条可根据自身习惯书写, 但尽量保证同类属 性写在一起. 属性列举: 布局定位属性主要包括: display & list-style & position（相应 的 top,right,bottom,left） ＆ float & clear ＆ visibility ＆ overflow； 自身属性主要包括: width & height & margin & padding & border & background; 文本属性主要包括：color & font & text-decoration & text-align & vertical-align & white- space & 其他 & content; 我所列出的这些属性只是最常用到的, 并不代表全部。
18.样式表中中文字体名, 请务必转码成unicode码, 以避免编码错误时乱码。
19.jQuery变量前面要加$
三、图片规范
1. 所有页面元素类图片均放入images文件夹, 测试用图片放于images/demo文件夹;
2. 图片格式仅限于png,jpg;
3. 命名全部用小写英文字母、 数字、 _ 的组合，其中不得包含汉字、空格、特殊字符；尽量用易懂的词汇, 便于团队其他成员理 解; 另, 命名分头尾两部分, 用下划线隔开, 比如ad_1.jpg,btn_submit.png;
4. 在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;
5. 尽量避免使用半透明的png图片;
6. 运用css sprite技术集中小的背景图或图标, 减小页面http请求, 但注意, 请务必在对应的sprite psd源图中划参考线, 并保存至images目录 下.
四、注释规范
1. html注释: 注释格式 <!--这儿是注释-->, '--'只能在注释的始末位置,不可置入注释文字区域;
2. css注释: 注释格式 /*这儿是注释*/;
3. JavaScript注释, 单行注释使用'//这儿是单行注释' ,多行注释使用 /* 这儿有多行注释 */;