网站建设中样式命名规范

在我们网站建设的过程中，一个好的样式命名不仅可以让网站结构清楚明了，更对后期维护有很大的帮助，那么怎么给样式命名呢？

(1)首先是页面整体结构css命名

页面主体：main 内容：wrap/conent 页头：header/head 页尾：foot/footer 导航：nav /menu 侧栏：sidebar 栏目：column 左右中：left right center

(2)导航

导航：nav 主导航：mainbav

子导航：subnav 顶导航：topnav

边导航：sidebar 左导航：leftside

右导航：rightside 菜单：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.不使用大写形式的类名和id名;

2.尽可能使用描述性的英文单词的组合作为类名和id名;

3.id名及类名的多个英文单词之间使用“_”短横线分隔;

4.按区域进行描述编号 例：main01_div01_ul01 (可以理解为主体第一区域 第一DIV下的第一个UL)

附：一些CSS框架的命名参考

主要的 master.css 模块 module.css 基本共用 base.css

后台的样式可以用admin.css

主题 themes.css 专栏 columns.css 打印 print.css

文字 font.css 表单 forms.css 补丁 mend.css

布局，版面 layout.css

更多技术尽在深圳网站建设