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