亿坊软件前端命名规范

在前端开发中，文件命名的重要性不言而喻。由于历史原因和个人习惯，不同的开发者在命名DOM结构、图片和CSS文件时，可能会产生不一致的情况。这不仅会导致维护成本增加，还会降低团队协作效率。因此，制定一套统一的命名规范至关重要！
本文长期更新，请亿坊同事收藏好

需要注意的几点
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
控件样式 controls.css
全局样式 global.css
网站样式 site.css
样式统一出口 style.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”，这样更有助于代码的可读性和维护性。

以上标签同时适用亿坊CMS - https://www.yifangcms.com/docs/9/