HTML命名规范

一、关于选择器的命名
 
W3C CSS2.1的 4.1.3 节中提到:标识符(包括选择器中的元素名,类和ID)只能包含字符[a- zA-Z0-9]和ISO 10646字符编码U+00A1及以上,再加连字号(-)和下划线(_);它们不能以 数字,或一个连字号后跟数字为开头。它们还可以包含转义字符加任何ISO 10646字符作为一个数 字编码。
 
注:由于设计到的字符很多,本文只针对字符[a-zA-Z0-9],再加连字号(-)和下划线(_)进行讨论。 关于CSS中允许使用的字符和大小写信息,请参考W3C CSS2.1的4.1.3节
 
二、差异及可能产生的问题
 
在W3C CSS2.1说明文档中,只提到选择器标识符不能以数字,或一个连字号后跟数字为开头。除此之外,没有相关的说明。那么各浏览器下的表现是否遵循这一规则呢?
 
三、如何避免受此问题影响
 
坚持以字母开头命名选择器,这样可保证在所有浏览器下都能兼容。
 
四、关于团队合作的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; }
 
.font9pt {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
上一篇:2dtoolkit获取sprite像素大小的方法


下一篇:Http-server 的使用