# 1.布局相关
| 语义 | 命名 | 简写
| --- | --- | ---
| 盒容器 |wrap |wrap
| 盒子 |box |box
| 容器 |container |container
| 主栏 |main |main
| 侧栏 |sidebar / aside |sidebar / aside
| 文档 |doc |doc
| 头部 |head |hd
| 主体 |body |bd
| 底部 |foot |ft
# 2.模块相关
| 语义 | 命名 |简写
| --- | --- |---
| 导航 | navigation | nav
| 面包屑 | crumb | crumb
| 菜单 | menu | menu
| 选项卡 | tab | tab
| 标题 | title | title
| 内容 | content | content
| 列表 | list | list
| 表格 | table | table
| 排行榜 | rank | rank
| 登陆 | login | login
| 表单 | form | form
| 品牌标识 | logo | logo
| 广告 | advertise | ad
| 搜索 | search | search
| 切换 | slide | slide
| 提示 | tips | tips
| 版权 | copyright | copyright
| 按钮 | button | btn
| 输入 | input | ipt
| 结果 | result | result
| 下载 | download | dowload
| 新闻 | news | news
| 注册 | register | reg
| 热点 | hot |hot
| 展|开 | collapse | collapse
| 警告 | alert | alert
| 提示 | tooltip | tooltip
| 下拉 | dropdown | dropdown
# 3.状态相关
|语义 | 命名 |简写
| --- | --- |---
| 选中 | selected | selected
| 当前 | current | current
| 激活 | active | active
| 显示 | show | show
| 隐藏 | hidden | hide
| 打开 | open | open
| 关闭 | close | close
| 出错 | error | err
| 禁用 | disabled | disabled
| 扩展 | extend | extend
# 4.命名规则
## 4.1驼峰命名
```
<p class="navWrap"></p>
```
## 4.2 划线命名
```
<p class="nav-wrap"></p>
```
或
```
<p class="nav_wrap"></p>
```
