在前端开发中，文件命名的重要性不言而喻。由于历史原因和个人习惯，不同的开发者在命名DOM结构、图片和CSS文件时，可能会产生不一致的情况。这不仅会导致维护成本增加，还会降低团队协作效率。因此，制定一套统一的命名规范至关重要！
本文长期更新，请亿坊同事收藏好 - boss
需要注意的几点
1.尽量考虑为元素命名其本身的作用或”用意”，达到语义化。不要使用表面形式的命名.
如:red/left/big等。
2.组合命名规则:
[元素类型]-[元素作用/内容]
如:搜索按钮: btn-search
登录表单:form-login
新闻列表:list-news
3.涉及到交互行为的元素命名:
凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:
鼠标悬停:：hover 点击：click 已浏览：visited
如:搜索按钮: btn-search、btn-search-hover、btn-search-visited
目录命名
首先，目录的命名要清晰、简洁。通常，我们会按照业务模块来划分目录，例如“products”、“users”等。这样不仅方便管理，还能快速定位到相应的文件。
样式文件夹：css
脚本文件夹：js
样式类图片文件夹：img
图片命名
图片的命名同样重要。建议按照一定的顺序来命名，例如“product_1.jpg”、“product_2.jpg”，这样可以避免混乱。另外，如果图片涉及到不同的业务模块，可以在命名中加入相应的标识，例如“users_avatar.jpg”。
图片命名建议以下顺序命名
图片业务（可选）+ （mod_）图片功能类别（必选） + 图片模块名称（可选）+ 图片精度（可选）
图片功能类别：
mod_：是否公共，可选
icon：模块类固化的图标
logo：LOGO类
spr：但页面各种元素合并集合
btn：按钮
bg：可平铺或者大背景
HTML/CSS文件命名
对于HTML和CSS文件，命名要遵循一定的规则。HTML文件通常以“.html”结尾，而CSS文件则以“.css”结尾。在命名时，可以按照业务模块来划分，例如“products.html”、“users.css”。
主要的 master.css
布局，版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css
(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; }
另外在编辑样式表时可用的注释可这样写：
<– Footer –>
内容区
<– End Footer –>
ClassName命名
最后，ClassName的命名也是关键。建议使用有意义的命名，避免使用过于简单或模糊的名称。例如，可以使用“product-name”来代替“p-name”，这样更有助于代码的可读性和维护性。
| ClassName | 含义 |
|---|---|
| 关于 | about |
| 页头 | header |
| 登录条 | loginbar |
| 标志 | logo |
| 商标 | brand |
| 侧栏 | sidebar |
| 广告 | banner |
| 导航 | nav |
| 次级的，子级的 | sub |
| 子导航 | subnav |
| 顶部导航 | opnav |
| 主导航 | mainnav |
| 迷你导航 | mininav |
| 导航文本 | textnav |
| 子导航/二级导航 | subnav |
| 图标 | icon |
| 菜单 | menu |
| 子菜单 | submenu |
| 搜索 | search |
| 滚动 | scroll |
| 页面主体 | warpper |
| 内容 | content |
| 皮肤 | skin |
| 表单 | from |
| 购物区 | shop |
| 标签页 | tab |
| 列表/清单 | list |
| 新闻列表 | newslist |
| 下载列表 | downloadlist |
| 图片列表 | piclist |
| 下拉菜单 | dropmenv |
| 圆角 | cor/corner |
| 首页 | homepage |
| 指南 | guild |
| 提示信息 | msg |
| 小技巧 | tips |
| 栏目标题 | title |
| 服务 | service |
| 热点 | hot |
| 新闻 | news |
| 下载 | download |
| 状态 | status |
| 按钮 | btn |
| 投票 | vote |
| 友情链接 | link |
| 页脚 | footer |
| 版权 | copyright |
| 网站地图 | sitemap |
| 会员卡 | card |
| 头像 | face/avatar |
| 关闭 | close |
| 登陆 | login |
| 注册 | register |
| 密码 | password |
| 布局 | layout |
| 大div | bigdiv |
| 左分栏 | leftdiv |
| 右分栏 | rightdiv |
| 左浮动 | leftfloat |
| 右浮动 | rightfloat |
| mainbox | |
| 子页面/二级页面 | subpage |
| 错误 | error |
| 描述description | |
| 帮助 | help |
| 分享 | share |
| 提交 | submit |
| 略图 | thumb |
| 时间 | time |
| 视频 | video |
| 容器，包，一般用于最外层 | wrap |
| 容器，包，一般用于最外层 | wrapper |
| 成功（提示） | success |
| 模块 | module |
| 更多（展开） | more |
| 作者 | author |
以上标签同时适用亿坊CMS - https://www.yifangcms.com/docs/9/
