前端常用的命名规则及规范

前端最常用的命名及规范

网页内容类

标题: title

• 摘要: summary
• 箭头： arrow
• 商标： labe
• l网站标志： logo
• 转角/圆角： corner
• 横幅广告： banner
• 子菜单： subMenu
• 搜索： search
• 搜索框： searchBox
• 登录：login
• 登录条：loginbar
• 工具条： toolbar
• 下拉： drop
• 标签页： tab
• 当前的： current
• 列表： list
• 滚动：scroll
• 服务： service
• 提示信息：msg
• 热点：hot
• 新闻： news
• 小技巧： tips
• 下载： download
• 栏目标题： title
• 热点： hot
• 加入： joinus
• 注册： regsiter
• 指南： guide
• 友情链接：friendlink
• 状态： status
• 版权： copyright
• 按钮： btn 合作伙伴： partner 投票： vote 左右中：left right center

id的命名规则

(1)页面结构

1. 容器: container
2. 页头：header
3. 内容：content/container
4. 页面主体：main
5. 页尾：footer
6. 导航：nav
7. 侧栏：sidebar
8. 栏目：column
9. 页面外围控制整体布局宽度：wrapper
10. 左右中：left right center

(2)导航

1. 主导航：mainbav
2. 子导航：subnav
3. 顶导航：topnav
4. 边导航：sidebar
5. 左导航：leftsidebar
6. 右导航：rightsidebar
7. 菜单：menu
8. 子菜单：submenu
9. 标题: title
10. 摘要: 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

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 { }

前端书写规范

1、所有书写均在英文半角状态下的小写；
2、id，class必须以字母开头；
3、所有标签必须闭合；
4、html标签用tab键缩进；
5、属性值必须带引号；
6、ul,li/ol,li/dl,dt,dd拥有父子级关系的标签；
7、p,dt,h标签 里面不能嵌套块属性标签；
8、a标签不能嵌套a；
9、内联元素不能嵌套块；（a除外但是不建议）