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

本文来自百洋软件研究实验室的博客园博文《怎么给div+css样式表命名的规则》

【编辑推荐】

CSS 3中的炫目新功能抢先预览
CSS 3备受期待的8大功能
CSS网页布局困扰新手的八个问题
25个下拉菜单导航脚本下载
HTML 5 正式标准恐将2022年才能正式发布

当前文章：谈DIV+CSS样式表命名的规则方法
文章位置：http://www.shufengxianlan.com/qtweb/news38/23488.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容