# 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> ~~~