前端命名规范

Posted 2020-12-27 hongyaxi

（一）

主体头：header内容：content/container尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center登录条：loginbar标志：logo广告：banner页面主体：main热点：hot新闻：news下载：download子导航：subnav菜单：menu子菜单：submenu搜索：search友情链接：friendlink页脚：footer版权：copyright滚动：scroll内容：content标签页：tab文章列表：list提示信息：msg小技巧：tips栏目标题：title加入：joinus指南：guild服务：service注册：regsiter状态：status投票：vote合作伙伴：partner

(二)

css注释的写法: 内容区html注释的写法 ：<!--header头部-- >

(三)

id的命名:

(1)页面结构容器: container页头：header内容：content/container页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center

(2)导航导航：nav主导航：mainnav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu子菜单：submenu标题: title摘要: summary

(3)功能标志：logo广告：banner登陆：login登录条：loginbar注册：regsiter搜索：search功能区：shop标题：title加入：joinus状态：status按钮：btn滚动：scroll标签页：tab文章列表：list提示信息：msg当前的: current小技巧：tips图标: icon注释：note指南：guild服务：service热点：hot新闻：news下载：download投票：vote合作伙伴：partner友情链接：link版权：copyright

(四)

class的命名:

(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; }

(4)标题栏样式,使用’类别+功能’的方式命名,如 .barnews { } .barproduct { }

注意事项:: 1.一律小写; 2.尽量用英文; 3.不加中杠和下划线; 4.尽量不缩写，除非一看就明白的单词.

主要的master.css 模块 module.css 基本共用 base.css 布局，版面layout.css 主题 themes.css 专栏 columns.css 文字 font.css 表单 forms.css 补丁 mend.css 打印print.css