css命名规则：图片切图转网页的代码规范

　　网上整理的比较好的css命名规则，为css代码的规范化做参考，增加代码的可读性。

　　id的命名:

　　(1)页面结构

　　容器: container 页头：header 内容：content/container

　　页面主体：main 页尾：footer 导航：nav

　　侧栏：sidebar 栏目：column 左右中：left right center

　　页面外围控制整体布局宽度：wrapper

　　(2)导航

　　导航：nav

　　主导航：mainbav

　　子导航：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.不使用大写形式的类名和id名;

　　2.尽可能使用描述性的英文单词的组合作为类名和id名;

　　3.id名及类名的多个英文单词之间使用“_”短横线分隔;

　　4.按区域进行描述编号 例：main01_div01_ul01 (可以理解为主体第一区域 第一DIV下的第一个UL)

　　附：一些CSS框架的命名参考

　　主要的 master.css 模块 module.css 基本共用 base.css

　　主题 themes.css 专栏 columns.css 打印 print.css

　　文字 font.css 表单 forms.css 补丁 mend.css

　　布局，版面 layout.css