前端命名规范以及常用命名整理

1、基本要求：

1）文件编码统一使用 UTF-8 编码； 
2）命名时以符合语义为主要参考指标，CSS属性书写规范，采用统一风格及命名方法； 
3）结构清晰，层级关系明朗，以不超过三级为标准； 
4）同一表现形式的样式要求可重复利用，模块组件类的样式要求可整体外部移植； 
5）编写 CSS 的时候，应当避免使用CSS Hack，能不用则不用。 
6）所有页面默认都针对Firefox 等最接近标准的浏览器进行设计，然后使用IE 特有条件注释功能进行针对性修正。 
7）请使用英文进行命名，尽量避免使用拼音。命名要求具有可读性，尽量避免使用缩写。命名虽然允许数字，但应尽量避免使用数字命名。 

2、命名方法  要求采用统一的命名方法。常用命名方法有： 
1）连写式命名法，如：helloworld 
2）中线命名法，如：hello-world（目前采用此方法的较多，建议采用） 
3）下划线命名法，如：hello_world 
4）骆驼命名法，如：helloWorld 
5）帕斯卡命名法，如：HelloWorld 
6）其他方法。

3、ID及Class命名常用名称

(1)页面结构
- 容器: container
- 页头：header
- 内容：content/container
- 页面主体：main
- 页尾：footer
- 导航：nav
- 侧栏：sidebar
- 栏目：column
- 页面外围控制整体布局宽度：wrapper
- 左右中：left right center
(2)导航
- 导航：nav
- 主导航：mainbav
- 子导航：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

外套 wrap ------------------用于最外层
头部 header ----------------用于头部
主要内容 main ------------用于主体内容（中部）
左侧 main-left -------------左侧布局
右侧 main-right -----------右侧布局
导航条 nav -----------------网页菜单导航条
内容 content ---------------用于网页中部主体
底部 footer -----------------用于底部
ogo：标记网站logo标志
banner：标语、广告条、顶部广告条
login：登陆，（例如登录表单：form-login）
loginbar：登录条
regsiter：注册
tool、toolbar：工具条
search：搜索
searchbar：搜索条
searchlnput：搜索输入框
shop：功能区，表示现在的
icon：小图标
label：商标
homepage：首页
subpage：二级页面子页面
hot：热门热点
list：文章列表，（例如新闻列表：list-news）
scroll:滚动
tab：标签
sitemap：网站地图
msg 或 message：提示信息
current：当前的
joinus：加入
status：状态
btn：按钮，（例如搜索按钮可写成：btn-search）
tips：小技巧
note：注释
guild：指南
arr、arrow：标记箭头
service：服务
breadcrumb：(即页面所处位置导航提示）
download：下载
vote：投票
siteinfo：网站信息
partner：合作伙伴
link、friendlink：友情链接
copyright：版权信息
siteinfoCredits：信誉
siteinfoLegal：法律信息
登录条:loginBar

　　标志:logo

　　侧栏:sideBar

　　广告:banner

　　导航:nav

　　子导航:subNav

　　菜单:menu

　　子菜单:subMenu

　　搜索:search

　　滚动:scroll

　　页面主体:main

　　内容:content

　　标签页:tab

　　文章列表:list

　　提示信息:msg

　　小技巧:tips

　　栏目标题:title

　　友情链接:friendLink

　　页脚:footer

　　加入:joinus

　　指南:guild

　　服务:service

　　热点:hot

　　新闻:news

　　下载:download

　　注册:regsiter

　　状态:status

　　按钮:btn

　　投票:vote

　　合作伙伴:partner

　　版权:copyRight