web前端代码规范

（一）CSS文件命名规范

全局样式 ：global.css
布局、版面 ：layout.css
字体样式 ：font.css
按钮样式 ：button.css
主要的 ：master.css
专栏 ：columns.css
主题 ：themes.css
模块 ：module.css
基本共用 ：base.css

（二）页面结构命名

内容/容器 ： content/container
页头 ： header
页面主体 ： main
模块头 ： hd
页尾 ： footer
栏目 ： column
模块 ： mod
左右中 ： left right center
模块主题内容容器 ： md
页面外围控制整体布局宽度 ： wrapper

（三）导航命名

导航 ： nav
主导航 ： main nav
子导航 ： sub nav
顶导航 ： top nav
边导航 ： sidebar
左导航 ： left side bar
右导航 ： right side bar
菜单 ： menu
子菜单 ： submenu
摘要 ： summary

（四）功能命名

（个人有个人的书写规范，不做强制要求）
标志 ：logo
广告 ：banner
登陆 ：login
登录条 ：login-bar
注册 ：register
搜索 ：search
功能区 ：shop
栏目标题 ：title
加入 ：join-us
状态 ：status
按钮 ：btn
滚动 ：scroll
标签页 ：tab
文章列表 ：list
提示信息 ：msg
当前的 ：current
小技巧 ：tips
图标 ：icon
注释 ：note
指南 ：guild
服务 ：service
热点 ：hot
新闻 ：news
下载 ：download
投票 ：Vote
合作伙伴 ：partner
友情链接 ：friend-link
版权 ：copyright
活动元素 ：active
未活动元素 ：normal

（五）CSS书写规范-性能优化方案

1、禁止class 与id 重名
2、书写顺序：布局定位属性–>自身属性–>文本属性–>其他属性
.Box{
/* 布局定位类 /
float:left;
/ 自身属性 /
width:100px;
height:100px;
/ 文本类 /
text-align:left;
/ 其他属性 */
background:red;
}