CSS命名规范
一、CSS命名规范：
1、文件命名规范
全局样式：global.css；
框架布局：layout.css；
字体样式：font.css；
链接样式：link.css；
打印样式：print.css；
2、常用类/ID命名规范
页 眉：header
内 容：content
容 器：container
页 脚：footer
版 权：copyright
导 航：menu
主导航：mainMenu
子导航：subMenu
标 志：logo
标 语：banner
标 题：title
侧边栏：sidebar
图 标：Icon
注 释：note
搜 索：search
按 钮：btn
登 录：login
链 接：link
信息框：manage
……
1、文件命名规范
全局样式：global.css；
框架布局：layout.css；
字体样式：font.css；
链接样式：link.css；
打印样式：print.css；
2、常用类/ID命名规范
页 眉：header
内 容：content
容 器：container
页 脚：footer
版 权：copyright
导 航：menu
主导航：mainMenu
子导航：subMenu
标 志：logo
标 语：banner
标 题：title
侧边栏：sidebar
图 标：Icon
注 释：note
搜 索：search
按 钮：btn
登 录：login
链 接：link
信息框：manage
……
1．文件命名规范
全局样式：global.css；
框架布局：layout.css；
字体样式：font.css；
链接样式：link.css；
打印样式：print.css；
主要的 master.css
专栏 columns.css
主题 themes.css
模块 module.css
基本共用 base.css
表单 forms.css
补丁 mend.css
2．页面结构
容 器: container
页 头：header
内 容：content
页面主体：main
页 尾：footer
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
3．导航
导航：nav
主导航：mainNav
子导航：subNav
顶导航：topNav
边导航：sideBar
左导航：leftSideBar
右导航：rightSideBar
菜单：menu
子菜单：submenu
摘要: summary
4．功能
标志：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
5,class的命名:
(1)颜色:使用字母"c"加颜色的英文名称或者16进制代码,深色用"cD",浅色用"cL"
.cRed { color: red; }
.cDRed{color:#cc0000;}
.cLRed{color:#ff9900;}
.cF60 { color: #f60; }
.c999 { color: #999; }
(2)字体大小,使用"font+尺寸代号"或者使用"font+字体大小"作为名称,如
.fontS{font-size:9px;}
.fontM{font-size:12px;}
.fontL{font-size:14px;}
.fontXL{font-size:16px;}
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)对齐样式,使用对齐方法加对齐目标的英文名称,如
.floatLeft{float:left; }
.floatRight{float:right;}
.valignTop{vertical-align:top}
.valignMiddle{vertical-align:middle;}
(4)标题栏样式,使用"类别+功能"的方式命名,如
.barNews { }
.barProduct { }
全局样式：global.css；
框架布局：layout.css；
字体样式：font.css；
链接样式：link.css；
打印样式：print.css；
主要的 master.css
专栏 columns.css
主题 themes.css
模块 module.css
基本共用 base.css
表单 forms.css
补丁 mend.css
2．页面结构
容 器: container
页 头：header
内 容：content
页面主体：main
页 尾：footer
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
3．导航
导航：nav
主导航：mainNav
子导航：subNav
顶导航：topNav
边导航：sideBar
左导航：leftSideBar
右导航：rightSideBar
菜单：menu
子菜单：submenu
摘要: summary
4．功能
标志：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
5,class的命名:
(1)颜色:使用字母"c"加颜色的英文名称或者16进制代码,深色用"cD",浅色用"cL"
.cRed { color: red; }
.cDRed{color:#cc0000;}
.cLRed{color:#ff9900;}
.cF60 { color: #f60; }
.c999 { color: #999; }
(2)字体大小,使用"font+尺寸代号"或者使用"font+字体大小"作为名称,如
.fontS{font-size:9px;}
.fontM{font-size:12px;}
.fontL{font-size:14px;}
.fontXL{font-size:16px;}
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)对齐样式,使用对齐方法加对齐目标的英文名称,如
.floatLeft{float:left; }
.floatRight{float:right;}
.valignTop{vertical-align:top}
.valignMiddle{vertical-align:middle;}
(4)标题栏样式,使用"类别+功能"的方式命名,如
.barNews { }
.barProduct { }
二、处理浏览器BUG问题
关于这点，不知那位高人把CSS BUG变成顺口溜了！在这里引用一下，很容易记住的！
1、IE边框若显若无，须注意，定是高度设置已忘记；
2、浮动产生有缘故，若要父层包含住，紧跟浮动要清除，容器自然显其中；
3、三像素文本慢移不必慌，高度设置帮你忙；
4、兼容各个浏览须注意，默认设置行高可能是杀手；
5、独立清除浮动须铭记，行高设无，高设零，设计效果兼浏览；
6、学布局须思路，路随布局原理自然直，轻松驾驭html，流水布局少hack，代码清爽，兼容好，友好引擎喜欢迎。
三、所有标签皆有源
只是默认各不同，span是无极，无极生两仪—内联和块级，img较特殊，但也遵法理，其他只是改造各不同，一个*号全归原，层叠样式理须多练习，万物皆规律。
四、图片链接排版须小心
图片链接文字链接若对齐，padding和vertical-align:middle要设定，虽差微细倒无妨。
五、IE浮动双边距
请用display：inline。
六、列表横向排版
列表代码须紧靠，空隙自消须铭记。
DIC+CSS学习是一条很长的路，真正走下去必须要有一颗虔诚的新心！
关于这点，不知那位高人把CSS BUG变成顺口溜了！在这里引用一下，很容易记住的！
1、IE边框若显若无，须注意，定是高度设置已忘记；
2、浮动产生有缘故，若要父层包含住，紧跟浮动要清除，容器自然显其中；
3、三像素文本慢移不必慌，高度设置帮你忙；
4、兼容各个浏览须注意，默认设置行高可能是杀手；
5、独立清除浮动须铭记，行高设无，高设零，设计效果兼浏览；
6、学布局须思路，路随布局原理自然直，轻松驾驭html，流水布局少hack，代码清爽，兼容好，友好引擎喜欢迎。
三、所有标签皆有源
只是默认各不同，span是无极，无极生两仪—内联和块级，img较特殊，但也遵法理，其他只是改造各不同，一个*号全归原，层叠样式理须多练习，万物皆规律。
四、图片链接排版须小心
图片链接文字链接若对齐，padding和vertical-align:middle要设定，虽差微细倒无妨。
五、IE浮动双边距
请用display：inline。
六、列表横向排版
列表代码须紧靠，空隙自消须铭记。
DIC+CSS学习是一条很长的路，真正走下去必须要有一颗虔诚的新心！
