CSS命名规则整理

前言

在开发的道路上已经走了5年了， 作为一个后端开发，之前的工作重心一直都是在后端上。前端技术属于那种"半吊子"，什么都会， 什么都不精。 上个月接手一个前端的系统， 整个界面编写完成之后，发现自己的前端命名有很大的问题， 没有什么规律， 都是临时起意命名的，有些模块差不多的功能， 命名确是大不相同。于是， 今天抽出一点时间， 来整理一下自己这个前端命名的规范。（以下内容有部分是从百度查询的， 一部分是问前端开发的朋友的。也许每个人的规范不一样， 但是总体来说都是差不多的。）

ID

id，我通常用驼峰式命名。

#headTitle{ … } 		/*页面头部标题的ID*/
#sidebarFooter { … } 	/*侧边栏底部模块*/

Class

类名，我通常用横线隔开
例如：

.head-title { … } 		/*页面头部标题的类名*/
.nav-li { … } 			/*导航条上list的类名*/

常用的CSS 命名规则

头：header	内容：content/container	底部：footer	导航：nav	子导航：subnav
侧边栏：sidebar	轮播图：banner	页面主体：main	搜索：search	友情链接：friendlink
文章列表：list	栏目标题：title	下载：download	标签页：tab	标志：logo
提示信息：message	状态：status	菜单：menu	热点：hot	子菜单：submenu

颜色命名

颜色的命名规范可以使用颜色的名称或者使用颜色的16进制值来命名。

.red { color: red; }
.f2f2f2 { color: #f2f2f2; }
.000 { color: #000; }

字符大小命名

字体大小,可以直接使用 font + 字体大小 来命名

.font16px { font-size: 16px; }

大致整理出这些， 如果其他的， 麻烦在评论区留言。