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>
