【命名规范】Web前端命名规范手册

一、规范目的

1.1 概述

提高团队协作效率，便于后台人员添加功能及前端后期优化维护， 前端开发人员必须按本文档规范进行前台页面开发。 本文档如有不对或者不合适的地方请及时提出， 经讨论决定后可以更改此文档。

二、命名规范

2.1 文件命名规则

• 文件名称统一用小写的英文字母、数字和下划线的组合，其中不得包含汉字、空格和特殊字符；
• 命名原则
  • 每个成员能够方便的理解每个文件的意义
  • 在文件夹中使用“按名称排例”命令时，同一种大类文件排列一起，以便查找、修改、替换、计算负载量等操作

a. HTML的命名原则

• 引文件统一使用index.htm index.html index.asp文件名（小写）
• 各子页命名原则首先应以栏目名的英语翻译取单一单词为名称

关于我们 \ aboutus；信息反馈 \ feedback；产品 \ product

• 如果栏目名称多而复杂并不好以英文单词命名，则统一使用该栏目名称拼音或拼音的首字母表示
• 每一个目录中应该包含一个缺省（默认）的html 文件，文件名统一用index.htm index.html index.asp

b. 图片的命名原则

• 图片的名称分为头尾两部分，用下划线隔开，头部分表示此图片的大类性质

位置	名称	示例
放置在页面顶部的广告、装饰图案等长方形图片	banner	banner_sohu.gif
标志性图片	logo	logo_police.gif
在页面上位置不固定且带有链接的小图片	button	button_beauty.gif
在页面上某位置连续出现，性质相同的链接栏目图片	menu	menu_aboutus.gif
装饰用的照片	pic	pic_people.jpg
不带链接表示标题的图片	title	title_news.gif
鼠标感应效果图片命名	图片名_on/off	menu1_on.gif/menu1_off.gif

c. javascript的命名原则

• 功能表述

广告条js文件 ad.js ；弹出窗口jst文件 pop.js

d. 动态语言文件命名原则

• 性质_描述，描述可以有多个单词，用_隔开，性质一般是该页面概要

register_form.asp；register_post.asp；topic_lock.asp

e. class类命名规则

位置	名称
头	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
内容	content
标签页	tab
文章列表	list
提示信息	msg
小技巧	tips
栏目标题	title
加入	joinus
指南	guild
服务	service
注册	regsiter
状态	status
投票	vote
合作伙伴	partner

f. 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
指南	guide
服务	service
热点	hot
新闻	news
下载	download
投票	vote
合作伙伴	partner
友情链接	link
版权	copyright

g. 注释写法

/* Footer */

h. css基本样式

• 重定义的最先，伪类其次，自定义最后，便于自己和他人阅读

/* CSS Document */
body {margin:0; padding:0; font:12px "\5B8B\4F53",san-serif;background:#fff;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}   
table,td,tr,th{font-size:12px;}
li{list-style-type:none;}
img{vertical-align:top;border:0;}
ol,ul {list-style:none;}
h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;}
address,cite,code,em,th {font-weight:normal; font-style:normal;}
.fB{font-weight:bold;}
.f12px{font-size:12px;}
.f14px{font-size:14px;}
.left{float:left;}
.right{float:right;}

a {color:#2b2b2b; text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {color:#ba2636;text-decoration:underline;}
a:active {color:#ba2636;}