CSS样式命名规则及参考命名标准 <?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />
在写
CSS
的时候,经常为一些名字而发愁,比如说菜单后面的背景要用什么词来表示呢?大家都知道,菜单一般用
menu
来表示,那么菜单后面的背景我会用
menubg
,
CSS
里就写
#menubg {…}
。
( 一 ) 常用的 CSS 命名规则
头: 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
( 二 ) 注释的写法:
/* Footer */
内容区
/* End Footer */
( 三 )id 的命名 :
(1) 页面结构
容器 : container
页头: header
内容: content/container
页面主体: main
页尾: footer
导航: nav
侧栏: sidebar
栏目: column
页面外围控制整体布局宽度: wrapper
左右中: left right center
(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; }
.font<?xml:namespace prefix = st1 ns = "urn:schemas-microsoft-com:office:smarttags" />9pt {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
( 一 ) 常用的 CSS 命名规则
头: 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
( 二 ) 注释的写法:
/* Footer */
内容区
/* End Footer */
( 三 )id 的命名 :
(1) 页面结构
容器 : container
页头: header
内容: content/container
页面主体: main
页尾: footer
导航: nav
侧栏: sidebar
栏目: column
页面外围控制整体布局宽度: wrapper
左右中: left right center
(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; }
.font<?xml:namespace prefix = st1 ns = "urn:schemas-microsoft-com:office:smarttags" />9pt {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
个人感觉这个挺实用的,so...转载方便日后大家一起学习....
转载于:https://blog.51cto.com/haody/65207