DIV+CSS样式表的id和class常用命名规则

 

       用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的命名规则的话,请留言，多多指教.

文章轉載自：http://www.oecp.cn/hi/listly/blog/220