社区
掘金前端语法命名规范
一个好的命名规范有利于项目的开发和维护，也有利于团队的协作沟通，如果没有统一的规范，那么等着被同事捅刀子吧，这里不断积累常用的命名规范。
目录命名
- 项目文件夹：项目名称（英文字母）
- 样式文件夹：css
- 脚本文件夹：js
- 样式类图片文件夹：img
- 产品类图片文件夹：upload
- 字体类文件夹：fonts
ClassName 命名
ClassName 的命名应该尽量精短、明确，必须以字母开头命名，且全部为小写，单词之间统一使用下划线"_"连接
| ClassName | 含义 | ClassName | 含义 |
|---|---|---|---|
| about | 关于 | account | 账户 |
| arrow | 箭头图标 | article | 文章 |
| aside | 边栏 | audio | 音频 |
| avatar | 头像 | bg,background | 背景 |
| bar | 栏(工具类) | branding | 品牌化 |
| crumb,breadcrumbs | 面包屑 | btn,button | 按钮 |
| caption | 标题，说明 | category | 分类 |
| chart | 图表 | clearfix | 清除浮动 |
| close | 关闭 | col,column | 列 |
| comment | 评论 | community | 社区 |
| container | 容器 | content | 内容 |
| copyright | 版权 | current | 当前态，选中态 |
| default | 默认 | description | 描述 |
| details | 细节 | disabled | 不可用 |
| entry | 文章，博文 | error | 错误 |
| even | 偶数，常用于多行列表或表格中 | fail | 失败（提示） |
| feature | 专题 | fewer | 收起 |
| field | 用于表单的输入区域 | figure | 图 |
| filter | 筛选 | first | 第一个，常用于列表中 |
| footer | 页脚 | forum | 论坛 |
| gallery | 画廊 | group | 模块 |
| header | 页头 | help | 帮助 |
| hide | 隐藏 | hightlight | 高亮 |
| home | 主页 | icon | 图标 |
| info,information | 信息 | last | 最后一个，常用于列表中 |
| links | 链接 | login | 登录 |
| logout | 退出 | logo | 标志 |
| main | 主体 | menu | 菜单 |
| meta | 作者、更新时间等信息栏，一般位于标题之下 | module | 模块 |
| more | 更多（展开） | msg,message | 消息 |
| nav,navigation | 导航 | next | 下一页 |
| nub | 小块 | odd | 奇数，常用于多行列表或表格中 |
| off | 鼠标离开 | on | 鼠标移过 |
| output | 输出 | pagination | 分页 |
| pop,popup | 弹窗 | preview | 预览 |
| previous | 上一页 | primary | 主要 |
| progress | 进度条 | promotion | 促销 |
| rcommd,recommendations | 推荐 | reg,register | 注册 |
| save | 保存 | search | 搜索 |
| secondary | 次要 | section | 区块 |
| selected | 已选 | share | 分享 |
| show | 显示 | sidebar | 边栏，侧栏 |
| slide | 幻灯片，图片切换 | sort | 排序 |
| sub | 次级的，子级的 | submit | 提交 |
| subscribe | 订阅 | subtitle | 副标题 |
| success | 成功（提示） | summary | 摘要 |
| tab | 标签页 | table | 表格 |
| txt,text | 文本 | thumbnail | 缩略图 |
| time | 时间 | tips | 提示 |
| title | 标题 | video | 视频 |
| wrap | 容器，包，一般用于最外层 | wrapper | 容器，包，一般用于最外层 |
常见命名
| 名称 | 说明 | 名称 | 说明 |
|---|---|---|---|
| 整个顶部 | header | 快捷导航栏 | shortcut |
| 头部 | header | 标志 | logo |
| 购物车 | shopcar | 搜索 | search |
| 热点词 | hotwrods | 导航 | nav |
| 导航左侧 | .dd .dt | 导航右侧 | nav-group |
| 页面底部 | footer | 服务模块 | mod_service |
| 服务内容 | mod_service_item | 帮助模块 | mod_help |
| 帮助模块导航 | mod_help_nav | 底部版权 | mod_copyright |
| 链接部分 | mod_copyright_links | 中间部分 | container |
| 轮播图部分 | slider_list 或者 focus | 快报模块 | newsflash |
| 新闻 | news | 生活服务 | lifeservice |
| 主体盒子 | main | 上一个按钮 | focus-prev |
| 下一个按钮 | focus-next | 页 翻页 | pager |
(ﾟдﾟ)σ弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌⊃