网页标准化-CSS命名规划整理

(一) 常用的CSS命名规则：

头：header

中国站.长.站

 

内容：content/container Chinaz~com

尾：footer Www~Chinaz~com

导航：nav

Www@Chinaz@com

 

侧栏：sidebar Www.Chinaz.com

栏目：column 中.国站长站

页面外围控制整体布局宽度：wrapper 中国站.长站

左右中：leftrightcenter

站长.站

 

登录条：loginbar 中国站长_站,为中文网站提供动力

标志：logo

站长.站

 

广告：banner

站长.站

 

页面主体：main Www~Chinaz~com

热点：hot

Chinaz_com

 

新闻：news

Www.Chinaz.com

 

下载：download

中国站.长.站

 

子导航：subnav

中国站.长.站

 

菜单：menu 站.长站

子菜单：submenu 中.国.站.长.站

搜索：search Www^Chinaz^com

友情链接：friendlink

中国站长_站,为中文网站提供动力

 

页脚：footer Www_Chinaz_com

版权：copyright 站.长站

滚动：scroll Www~Chinaz~com

内容：content

Www~Chinaz~com

 

标签页：tab

中国.站.长站

 

文章列表：list

Www@Chinaz@com

 

提示信息：msg 中国.站.长站

小技巧：tips

中国.站.长站

 

栏目标题：title

中国站.长.站

 

加入：joinus

Chinaz.com

 

指南：guild Chinaz~com

服务：service 中.国.站长站

注册：regsiter 中国站长_站,为中文网站提供动力

状态：status 中国站长_站,为中文网站提供动力

投票：vote

Www.Chinaz.com

 

合作伙伴：partner

Www_Chinaz_com

 

(二) 注释的写法： Chinaz^com

/*Footer*/

站长.站

 

内容区 站长.站

/*EndFooter*/ 中.国.站长站

(三) id的命名： Www^Chinaz^com

(1)页面结构

Www^Chinaz^com

 

容器：container

中.国.站.长.站

 

页头：header Chinaz~com

内容：content/container

Www^Chinaz^com

 

页面主体：main

站长.站

 

页尾：footer

站长.站

 

导航：nav

Www~Chinaz~com

 

侧栏：sidebar 中国站.长.站

栏目：column

Www_Chinaz_com

 

页面外围控制整体布局宽度：wrapper 中国.站.长站

左右中：leftrightcenter 中国站长.站

(2)导航： Chinaz.com

导航：nav 站长.站

主导航：mainbav

中国站.长站

 

子导航：subnav

中.国站长站

 

顶导航：topnav

中国站长_站,为中文网站提供动力

 

边导航：sidebar [中国站长站]

左导航：leftsidebar Chinaz~com

右导航：rightsidebar 中国站长_站,为中文网站提供动力

菜单：menu Chinaz~com

子菜单：submenu Www~Chinaz~com

标题:title Chinaz^com

摘要:summary [中国站长站]

(3)功能： 中国站长.站

标志：logo Chinaz

广告：banner

站.长站

 

登陆：login

中国.站.长站

 

登录条：loginbar Chinaz~com

注册：regsiter Www.Chinaz.com

搜索：search 中国.站长站

功能区：shop

中国.站.长站

 

标题：title 中国站.长站

加入：joinus 中国站长.站

状态：status 中国站长.站

按钮：btn 站.长.站

滚动：scroll 中.国站长站

标签页：tab

中国站长.站

 

文章列表：list Www_Chinaz_com

提示信息：msg [中国站长站]

当前的:current

中.国.站.长.站

 

小技巧：tips 中.国.站.长.站

图标:icon Chinaz

注释：note

Www_Chinaz_com

 

指南：guild Www_Chinaz_com

服务：service Chinaz~com

热点：hot Chinaz

新闻：news

[中国站长站]

 

下载：download

Chinaz_com

 

投票：vote 中.国.站.长.站

合作伙伴：partner 中国站.长站

友情链接：link 站.长站

版权：copyright

中国站.长站

 

(四) class的命名：

站.长.站

 

(1)颜色：使用颜色的名称或者16进制代码，如：

中.国站长站

 

以下为引用的内容： .red{color:red;} .f60{color:#f60;} .ff8600{color:#ff8600;}

中国站.长.站

 

(2)字体大小，直接使用“font+字体大小”作为名称，如： Www@Chinaz@com

以下为引用的内容： .font12px{font-size:12px;} .font9pt{font-size:9pt;}

中国站.长站

(3)对齐样式，使用对齐目标的英文名称，如： Www@Chinaz@com

以下为引用的内容： .left{float:left;} .bottom{float:bottom;}

Chinaz.com

(4)标题栏样式，使用”类别+功能”的方式命名，如： 中国站.长站

以下为引用的内容： .barnews{} .barproduct{}

中.国.站.长.站

 

(五) 文件名命名： 中.国.站.长.站

主要的：master.css Www^Chinaz^com

模块：module.css Chinaz.com

基本共用：base.css 中.国.站长站

布局，版面：layout.css

中国站长_站,为中文网站提供动力

 

主题：themes.css Www~Chinaz~com

专栏：columns.css

中国站.长.站

 

文字：font.css 中国.站长站

表单：forms.css 站长.站

补丁：mend.css

中.国站长站

 

打印：print.css Chinaz~com

(六) 注意事项： 中国.站长站

(1)一律小写。 中国站.长站

(2)尽量用英文。

Chinaz

 

(3)不加中杠和下划线。

中国站.长站

 

(4)尽量不缩写，除非一看就明白的单词。 中国