CSS:命名规范心得分享

浏览数：23 / 时间：2015年06月09日

一个好的命名习惯（当然这里指的并不仅仅是CSS命名）。不仅可以提高开发效率，而且有益于后期修改和维护。

假设我们当前使用的命名方式都是约定成俗的，所有人都是这样写，那么你去到一个新团队，或者别人来接手你的工作，都可以大大缩短去阅读别人代码的时间。

一个规范化的命名，不用说，只要想想就能体会到其中的好处了。

CSS:命名规范心得分享
板块(Plate)	命名(Naming)	说明(Description)

主容器	wrapper	页面上最大的外部容器，如无特殊需求，不推荐使用
页面头部	header	主体内容以上的部分，即页面头部位置，可包含logo导航等
页面底部	footer	主体内容以下的部分，即页面底部位置，可包含版权备案等
面包屑	position	页面中的面包屑导航，如当前位置
页面主体	main	页面中呈现最重要内容的区域
网站标志	logo	标志着一个网站的图片或文字
一级导航	nav	一级导航
二级导航	subnav	二级导航
一级菜单	menu	一级菜单
二级菜单	submenu	二级菜单
页面通栏	banner	页面上的一些大条的图片
正文主体	content	页面主体中呈现主要内容的区域
正文侧栏	sidebar	页面主体中呈现次要内容的区域
广告	ad
标题	tit	页面上的标题部分，如头条标题可写为：tit-topline，连接符后面为标题部分的相关内容概述
摘要	summary	文章的摘要或说明
普通新闻列表	news-list	新闻标题列表
新闻top排行	top-list	有序的新闻列表
图片列表	pic-list	图片列表
图文混排	pic-txt
图文混排图片区	pic-area
图文混排文字区	txt-area
技巧提示	tips	一些技巧或者提示信息
搜索	search	搜索区域
外补丁	mtop/mright/mbot/mleft	如1像素外上补丁可以写成mtop1,2像素mtop2...
内补丁	ptop/pright/pbot/pleft	如1像素内上补丁可以写成ptop1,2像素ptop2...
12px的普通文字	f12	如14px可写为f14...
12px的加粗文字	fb12	如14px可写为fb14...