样式属性顺序
单个样式规则下的属性在书写时，应按功能进行分组，组之间需要有一个空行。同时要以Positioning Model > Box Model > Typographic > Visual的顺序书写，提高代码的可读性。
- Positioning Model 布局方式，位置，相关属性包括：position，top，z-index，display，float等。
- Box Model 盒子模型，相关属性包括：width，height，margin，padding，border，overflow等。
- Typographic 文本排版，相关属性包括：font，line-height，text-align等。
- Visual 视觉外观，相关属性包括：color，background，list-style，transform，animation等。
class命名规范
分类式命名法(在前端组件优化下尤为重要)
- 布局(grid)(.g-):将页面分割为几大块，通常有头部，主体，主栏，侧栏，尾部等。
- 模块(module)(.m-):通常是一个语义化可以重复使用的较大的整体，比如导航，登录，注册等。
- 元件(unit)(.u-):通常是一个不可再分的较为小巧的个体，通常被重复用于各种模块中，例如按钮，输入框。
- 功能(function)(.f-):为了方便一些常用样式的使用，我们将这些使用频繁的样式剥离出来，按照需求使用，通常这些选择器具有固定样式表现，比如清除浮动等(不可滥用)。
- 状态(.z-):为状态类样式加入前缀，统一标识，方便识别，它只能组合使用或作为后代出现。
- javascript(.j-):j-被专用与JS获取节点，请勿使用j-定义样式。
- class名称中只能出现小写字符和破折号(不是下划线，也不是驼峰命名法)。破折号应当用于相关class的命名(类似于空间命名)，例如：.btn和.btn-xxx。
- 避免过度任意的简写。例如：.btn代表button，但是.s不能代表任何的意思。
- class名称应当尽可能短，并且意义明确。
- 使用有意义的名称，使用有组织或目的的明确的名称，不要使用表现形式的名称。
- 基于最近的父class或基本(base)class作为新class的前缀。例如：父class为.btn则子class为.btn-xxx。
- 使用js-*class来标识行为（与样式相对），并且不要将这些class包含到css文件中。
统一了解和命名
|语义 | 命名 | 简写| --------- | -------- | ----------- || 布局.g- | ||文档| doc|doc |头部 | head | hd|主体 | body | bd|尾部 | foot | ft|主栏 | main | mn|主栏子容器 | mainc | mnc|侧栏 | side | sd|侧栏子容器 | sidec | sdc|盒容器 | wrap/box | wrap/box|==========|===========|===============|| 模块（.m-）、元件（.u-）：| 语义 | 命名 | 简写| 导航 | nav | nav| 子导航 | subnav | snav| 面包屑 | crumb | crm| 菜单 | menu | menu| 选项卡 | tab | tab| 标题区 | head/title | hd/tt| 内容区 | body/content | bd/ct| 列表 | list | lst| 表格 | table | tb| 表单 | form | fm| 热点 | hot | hot| 排行 | top | top| 登录 | login | log| 标志 | logo | logo| 广告 | advertise | ad| 搜索 | search | sch| 幻灯 | slide | sld| 提示 | tips | tips| 帮助 | help | help| 新闻 | news | news| 下载 | download | dld| 注册 | regist | reg| 投票 | vote | vote| 版权 | vcopyright | cprt| 结果 | result | rst| 标题 | title | tt| 按钮 | button | btn| 输入 | input | ipt||==========|===========|===============|| 功能（.f-）| | 语义 | 命名 | 简写 | | 清除浮动 | clearboth | cb| 左浮动 | floatleft | fl| 内联 | inlineblock | ib| 文本居中 | textaligncenter | tac| 垂直居中 | verticalalignmiddle | vam| 溢出隐藏 | overflowhidden | oh| 完全消失 | displaynone | dn| 字体大小 | fontsize | fz| 字体粗细 | fontweight | fs|==========|===========|===============|| 皮肤（.s-）| | 语义 | 命名 | 简写| 字体颜色 | fontcolor | fc| 背景颜色 | backgroundcolor | bgc| 边框颜色 | bordercolor | bdc|==========|===========|===============|| 状态(.z-)| | 语义 | 命名 | 简写| 选中 | selected | sel| 当前 | current | crt| 显示 | show | show| 隐藏 | hide | hide| 打开 | open | open| 关闭 | close | vclose| 出错 | error | err| 不可用 | disabled | dis
