个好的命名习惯(当然这里指的并不仅仅是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... |
|