前端代码书写规范

一：HTML规范

1.HTML标签名、类名、标签属性和大部分属性值统一用小写，基本所有的HTML代码使用小写。

2.不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含。 例如<link rel="stylesheet" href="" >

3.元素属性值使用双引号语法，元素属性值可以写上的都写上。  例如：<input type="radio" name="name" checked="checked" >

4.元素嵌套规范，每个块状元素独立一行，内联元素可选。

---/html/

|---- /index

|---- /index/index.html 首页

|---- /user/ 与用户相关的页面

|---- /user/login.html 登录页

---/css/

|---- /base.css 重置浏览器样式

|---- /page 逻辑页面的css

|---- /page/pagename.css 单独书写的css

|---- /common.css css通用样式库

---/js/

|---- /lib 公用组件

|---- /lib/jquery.2.2.3.min.js 调用jq库文件

|---- /page 逻辑页面的js

|---- /page/pagename.js 单独书写的js

|---- /common.js 公用方法

---/img/

|---- /page 页面对应的图片

|---- /page/wap 手机端图片夹

|---- /page/wap/wap_icon.png 手机端图标

|---- /logo.png 公用图片

二、格式&编码

文本文件： `.xxx` UTF-8_\(无BOM\)_ 编码

图片文件： `.png` _(PNG-24)_ `.jpg` _(压缩率8-12)_

动态图片： `.gif`

压缩文件： `.tar.gz` `.zip``.rar`

三、图片规范

1.内容图：

内容图多以商品图等照片类图片形式存在，颜色较为丰富，文件体积较大

• 优先考虑 JPEG 格式，条件允许的话优先考虑 WebP 格式

• 尽量不使用PNG格式，PNG8 色位太低，PNG24 压缩率低，文件体积大

• PC平台单张的图片的大小不应大于 200KB。

2.背景图

背景图多为图标等颜色比较简单、文件体积不大、起修饰作用的图片

• PNG 与 GIF 格式，优先考虑使用 PNG 格式,PNG格式允许更多的颜色并提供更好的压缩率

• 图像颜色比较简单的，如纯色块线条图标，优先考虑使用 PNG8 格式，避免不使用 JPEG 格式

• 图像颜色丰富而且图片文件不太大的（40KB 以下）或有半透明效果的优先考虑 PNG24 格式

• 图像颜色丰富而且文件比较大的（40KB - 200KB）优先考虑 JPEG 格式

• 条件允许的，优先考虑 WebP 代替 PNG 和 JPEG 格式

 四、常用命名推荐

CSS样式命名
网页公共命名
wrapper	页面外围控制整体布局宽度
container或content	容器,用于最外层
layout	布局
head, header	页头部分
foot, footer	页脚部分
nav	主导航
sub_nav	二级导航
menu	菜单
sub_menu	子菜单
side_bar	侧栏
sidebar_l, sidebar_r	左边栏或右边栏
main	页面主体
tag	标签
msg message	提示信息
tips	小技巧
vote	投票
friendlink	友情链接
title	标题
summary	摘要
login_bar	登录条
search_input	搜索输入框
hot	热门热点
search	搜索
search_output	搜索输出和搜索结果相似
search_bar	搜索条
search_results	搜索结果
copyright	版权信息
branding	商标
logo	网站LOGO标志
site_info	网站信息
site_info_legal	法律声明
site_info_credits	信誉
join_us	加入我们
partner	合作伙伴
service	服务
regsiter	注册
arr arrow	箭头
guild	指南
site_map	网站地图
list	列表
home_page	首页
sub_page	二级页面子页面
tool, toolbar	工具条
drop	下拉
dorp_menu	下拉菜单
status	状态
scroll	滚动
tab	标签页
left right center	居左、中、右
news	新闻
download	下载
banner	广告条(顶部广告条)

五、js 规范

命名方法：小驼峰式命名

命名规范：前缀应当是名词。(函数的名字前缀为动词，以此区分变量和函数)

命名建议：尽量在变量名字中体现所属类型，如:length、count等表示数字类型；而包含name、title表示为字符串类型。

变量命名示例：

studentCount：表示学生数量的整数变量
productName：表示产品名称的字符串变量
userAge：表示用户年龄的整数变量
articleTitle：表示文章标题的字符串变量
maxSpeed：表示最大速度的浮点数变量
errorMessage：表示错误信息的字符串变量

函数命名示例：

calculateTotal：计算总数的函数
displayMessage：显示消息的函数
updateProfile：更新个人资料的函数
fetchUserData：获取用户数据的函数
saveSettings：保存设置的函数
validateInput：验证输入的函数