web标准化设计环境中常用的CSS命名规则

常用的CSS命名规则

　　头：header

　　内容：content/container

月落网

　　尾：footer www.yueluo.net

　　导航：nav 字串8

　　侧栏：sidebar

yueluo.net

　　栏目：column

　　页面外围控制整体布局宽度：wrapper www.yueluo.net

　　左右中：left right center 字串7

　　登录条：loginbar

　　标志：logo 字串5

　　广告：banner

字串6

　　页面主体：main 月落

　　热点：hot

字串8

　　新闻：news

　　下载：download

www.yueluo.net

　　子导航：subnav

字串7

　　菜单：menu

yueluo.net

　　子菜单：submenu

字串5

　　搜索：search

月落网

　　友情链接：friendlink

yueluo.net

　　页脚：footer

yueluo.net

　　版权：copyright 字串9

　　滚动：scroll

月落网

　　内容：content 月落

　　标签页：tab

　　文章列表：list

yueluo.net

　　提示信息：msg

　　小技巧：tips 字串9

　　栏目标题：title

　　加入：joinus 字串6

　　指南：guild 字串7

　　服务：service 月落网

　　注册：regsiter www.yueluo.net

　　状态：status 月落

　　投票：vote yueluo.net

　　合作伙伴：partner 字串5

　　(二)注释的写法:

　　/* Footer */

月落

　　内容区 字串8

　　/* End Footer */

　　(三)id的命名: 字串7

　　(1)页面结构 月落

　　容器: container

　　页头：header 字串8

　　内容：content/container 字串6

　　页面主体：main www.yueluo.net

　　页尾：footer

www.yueluo.net

　　导航：nav

字串5

　　侧栏：sidebar 字串7

　　栏目：column www.yueluo.net

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

yueluo.net

　　左右中：left right center

字串5

　　(2)导航 字串6

　　导航：nav

月落网

　　主导航：mainbav 字串5

　　子导航：subnav

　　顶导航：topnav 月落

　　边导航：sidebar

字串9

　　左导航：leftsidebar

　　右导航：rightsidebar

字串7

　　菜单：menu

　　子菜单：submenu 月落

　　标题: title 字串9

　　摘要: summary

www.yueluo.net

　　(3)功能 www.yueluo.net

　　标志：logo

　　广告：banner

字串5

　　登陆：login

　　登录条：loginbar

　　注册：regsiter

　　搜索：search

字串9

　　功能区：shop

　　标题：title

　　加入：joinus

字串5

　　状态：status

　　按钮：btn 字串8

　　滚动：scroll

字串8

　　标签页：tab

　　文章列表：list

字串5

　　提示信息：msg

月落网

　　当前的: current 月落

　　小技巧：tips 月落网

　　图标: icon www.yueluo.net

　　注释：note 字串8

　　指南：guild

　　服务：service

　　热点：hot

字串5

　　新闻：news www.yueluo.net

　　下载：download 字串9

　　投票：vote 字串5

　　合作伙伴：partner

　　友情链接：link 字串8

　　版权：copyright 月落网

　　(四)class的命名:

www.yueluo.net

　　(1)颜色:使用颜色的名称或者16进制代码,如 月落

　　.red { color: red; } www.yueluo.net

　　.f60 { color: #f60; } 字串7

　　.ff8600 { color: #ff8600; }

字串6

　　(2)字体大小,直接使用"font+字体大小"作为名称,如 字串9

　　.font12px { font-size: 12px; } 月落

　　.font9pt {font-size: 9pt; } 月落网

　　(3)对齐样式,使用对齐目标的英文名称,如 yueluo.net

　　.left { float:left; } 字串8

　　.bottom { float:bottom; } yueluo.net

　　(4)标题栏样式,使用"类别+功能"的方式命名,如

　　.barnews { } 字串6

　　.barproduct { }

月落

　　注意事项:: 字串7

　　1.一律小写;

　　2.尽量用英文;

字串8

　　3.不加中杠和下划线; 字串7

　　4.尽量不缩写，除非一看就明白的单词. 字串6

　　主要的 master.css

字串6

　　模块 module.css

　　基本共用 base.css

　　布局，版面 layout.css

www.yueluo.net

　　主题 themes.css

www.yueluo.net

　　专栏 columns.css 月落

　　文字 font.css 字串6

　　表单 forms.css 字串7

　　补丁 mend.css yueluo.net

　　打印 print.css