div+css样式表的id和class常用命名规则
疯子的紫梦
posted @ 2009年9月02日 05:41
in php
, 1231 阅读
用div+css样式表写页面有一段时间了，起初写div+css样式表的时候，最让我头疼的不是怎么写样式，而是给div+css样式起名，怎么样起才合适呢？要是就几行或几十行代码吧！就根据英文单词就行了。可是要是多了那就不好写了，有时候就直接用汉语拼音或拼音的首字母代替。可是多了吧，自己写的都看不出是什么意思，别说再让程序员调用这些样式了。div+css样式表的id和class的区别:就一句来概括, class可以定义多个值并且可以应用到多个标签上，但id只能是一个。所以就开始查一些相关的div+css样式表id和class的常用命名规则，请大家参考一下：
首先讲一下div+css样式表的id的常用命名规则如下表所示:
|
页头
|
header
|
登录条
|
loginBar
|
标志
|
logo
|
|
侧栏
|
sideBar
|
广告
|
Banner
|
导航
|
nav
|
|
子导航
|
subNav
|
菜单
|
menu
|
子菜单
|
subMenu
|
|
搜索
|
search
|
滚动
|
scroll
|
页面主体
|
main
|
|
内容
|
content
|
标签页
|
tab
|
文章列表
|
list
|
|
提示信息
|
msg
|
小技巧
|
tips
|
栏目标题
|
title
|
|
加入
|
joinus
|
指南
|
guild
|
服务
|
service
|
|
热点
|
hot
|
新闻
|
news
|
下载
|
download
|
|
注册
|
regsiter
|
状态
|
status
|
按钮
|
btn
|
|
投票
|
vote
|
合作伙伴
|
partner
|
友情链接
|
friendLink
|
|
页脚
|
footer
|
版权
|
copyRight
|
|
|
实际上上面的div+css样式表的id命名也会经常用大小写和_来区分，比如主导航就是MainNav,如果还有必要在区分就是MainNav_1,MainNav_2等等。也可以使用"类型+变量名称"的规则来命名，比如写一个红色字体的class,可以.f_red {}(f是font 字体的缩写)。总之原则是：大小写、_、缩写，大大增强代码的可读性。
再讲一下div+css样式表的class的常用命名规则如下表所示:
|
外 套
|
wrap
|
主导航
|
mainNav
|
子导航
|
subnav
|
|
页 脚
|
footer
|
整个页面
|
content
|
页 眉
|
header
|
|
商 标
|
label
|
标 题
|
title
|
主导航
|
mainNav
|
|
边导航
|
sidebar
|
左导航
|
leftsideBar
|
右导航
|
rightsideBar
|
|
旗 志
|
logo
|
标 语
|
banner
|
菜单内容
|
menu1Content
|
|
菜单容量
|
menuContainer
|
子菜单
|
submenu
|
边导航图标
|
sidebarIcon
|
|
注释
|
note
|
面包屑
|
breadCrumb
|
容器
|
container
|
|
内容
|
content
|
搜索
|
search
|
登陆
|
login
|
|
功能区
|
shop
|
当前的
|
current
|
|
|
当然像div+css样式表的id和class的命名远远不止这些,可能还会有更多的命名,你可以用一些通俗的易懂.容易理解的一些来命名,如果您有更好的div+css样式表的id和class的命名规则的话,请留言，多多指教.
评论 (0)
