HTML

前端命名规范 - 图1

语义化标签：

header
nav
article
section
aside
footer

主体

头部：header
内容：content/container
尾部：footer
导航：nav
侧栏：sidebar
栏目：column
整体布局：wrapper
左右中：left / right / center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：join
指南：guild
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner

id的命名规范

(1)页面结构

容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center

(2)导航

导航：nav
主导航：mainnav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary

(3)功能

标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright

(4)class的命名

(1)颜色：使用颜色的名称或者16进制代码，如：
.red { color: red; } .f60 { color: #f60; } .ff8600 { color: #ff8600; }
(2)字体大小，直接使用“font+字体大小”作为名称，如：
.font12px { font-size: 12px; } .font9pt {font-size: 9pt; }
(3)对齐样式，使用对齐目标的英文名称，如：
.left { float:left; } .bottom { float:bottom; }
(4)标题栏样式，使用“类别+功能”的方式命名，如：
.barnews { } .barproduct { }

Tips：

1.一律小写；
2.尽量用英文(汉字跨域或引入会需要解码,很麻烦)；
3.尽量不加中杠和下划线；
4.尽量不缩写，除非一看就明白的单词，如：wrapper可以写成wrap。
5.css文件命名规范：
主要的 master.css；
模块 module.css；
基本共用 base.css；
布局，版面layout.css；
主题 themes.css；
专栏 columns.css；
文字 font.css；
表单 forms.css；
补丁 mend.css；
打印print.css

JS

驼峰式命名法介绍

Pascal Case 大驼峰式命名法：首字母大写。eg：StudentInfo、UserInfo、ProductInfo

Camel Case 小驼峰式命名法：首字母小写。eg：studentInfo、userInfo、productInfo

文件资源命名

文件名不得含有空格

文件名建议只使用小写字母，不使用大写字母。( 为了醒目，某些说明文件的文件名，可以使用大写字母，比如README、LICENSE。 )

文件名包含多个单词时，单词之间建议使用半角的连词线 ( - ) 分隔。

引入资源使用相对路径，不要指定资源所带的具体协议 ( http:,https: ) ，除非这两者协议都不可用。

不推荐：

变量命名

命名方式 : 小驼峰式命名方法
命名规范 : 类型+对象描述的方式，如果没有明确的类型，就可以使前缀为名词

类型	小写字母
array	a
boolean	b
function	fn
int	i
object	o
regular	r
string	s

函数

命名方式 : 小驼峰方式 ( 构造函数使用大驼峰命名法 )
命名规则 : 前缀为动词

动词	含义	返回值
can	判断是否可执行某个动作 ( 权限 )	函数返回一个布尔值。true：可执行；false：不可执行
has	判断是否含有某个值	函数返回一个布尔值。true：含有此值；false：不含有此值
is	判断是否为某个值	函数返回一个布尔值。true：为某个值；false：不为某个值
get	获取某个值	函数返回一个非布尔值
set	设置某个值	无返回值、返回是否设置成功或者返回链式对象

常量

命名方法 : 全部大写
命名规范 : 使用大写字母和下划线来组合命名，下划线用以分割单词。
推荐：

var MAX_COUNT = 10; var URL = ‘http://www.baidu.com‘;

类的成员

公共属性和方法 : 同变量命名方式
私有属性和方法 : 前缀为下划线(_)后面跟公共属性和方法一样的命名方式

推荐(将name换成this是不是更熟悉了呢)

function Student(name) { var _name = name; // 私有成员
// 公共方法
this.getName = function () {        return _name;
}
// 公共方式
this.setName = function (value) {
    _name = value;
}
} var st = new Student(‘tom’); st.setName(‘jerry’); console.log(st.getName()); // => jerry：输出_name私有变量的值

注释规范

单行注释 ( // )

单独一行：//(双斜线)与注释文字之间保留一个空格
在代码后面添加注释：//(双斜线)与代码之间保留一个空格，并且//(双斜线)与注释文字之间保留一个空格。
注释代码：//(双斜线)与代码之间保留一个空格。

推荐 :
// 调用了一个函数；1)单独在一行setTitle();

var maxCount = 10; // 设置最大量；2)在代码后面注释

// setName(); // 3)注释代码

多行注释 ( / 注释说明 / )

若开始(/*和结束(*/)都在一行，推荐采用单行注释
若至少三行注释时，第一行为/*，最后行为*/，其他行以*开始，并且注释文字与*保留一个空格。
推荐 :

/
代码执行到这里后会调用setTitle()函数
setTitle()：设置title的值
/setTitle();

函数 ( 方法 ) 注释

函数(方法)注释也是多行注释的一种，但是包含了特殊的注释要求，参照 javadoc(百度百科)
语法：
/*
函数说明
@关键字
/
常用注释关键字

注释名	语法	含义	示例
@param	@param 参数名 {参数类型} 描述信息	描述参数的信息	@param name {String} 传入名称
@return	@return {返回类型} 描述信息	描述返回值的信息	@return {Boolean} true:可执行;false:不可执行
@author	@author 作者信息 [附属信息：如邮箱、日期]	描述此函数作者的信息	@author 张三 2015/07/21
@version	@version XX.XX.XX	描述此函数的版本号	@version 1.0.3
@example	@example 示例代码	@example setTitle(‘测试’)	如下