1、命名
标签、类名都使用小写，单词之间使用短横线分隔开。例：
正确：module-header 错误：moduleHeader 错误：module_header 错误：moduleheader
2、排版
1. 空格。
选择器 与 { 之前必须包含空格。
属性名的：后必须包含空格。如：
.selector { font-weight: bold;} >、+、~ 选择器的两边各保留一个空格。如：
label + input { margin-left: 5px;} 2. 分行。
对于以逗号分隔并且非常长的属性值（例如一堆渐变或者阴影的声明）可以放在多行中，这有助于提高可读性。如：
.selector { box-shadow: 1px 1px 1px #000, 2px 2px 1px 1px #ccc inset; background-p_w_picpath: linear-gradient(#fff, #ccc), linear-gradient(#f3c, #4ec); } 当一个样式块有多个选择器时，每个选择器都应占一行。如：
.selector,.selector-secondary,.selector[type="text"] { padding: 15px; margin-bottom: 15px;} 3、语法
1. 数值尽量缩写。例：
.selector { margin: 0px; opacity: 0.7;}/* 可优化为如下 */.selector { margin: 0; opacity: .7;} 2. 声明顺序。
属性的声明顺序应当按照如下顺序进行编写：
Position 定位
Box model 盒模型
Typographic 排版
Visual 外观
按照这样的顺序书写可提升浏览器渲染DOM的性能。如：
.selector { /* 定位 */ position: absolute; left: 0; z-index: 100; /* 盒模型 */ display: block; float: right; width: 100px; /* 排版 */ line-height: 1.5; color: #333; text-align: center; /* 外观 */ background-color: #f5f5f5; border: 1px solid #fff; border-radius: 3px; /* 其他 */ opacity: 1;} 4、CSS文件的分类与引用顺序
我们按照CSS的性质和用途，将CSS文件分成“公共型样式”、“特殊型样式”、“皮肤型样式”，并以此顺序引用。
公共型样式：包括了以下几个部分：“标签的重置和设置默认值”、“统一调用背景图和清除浮动或其他需统一处理的长样式”、“网站通用布局”、“通用模块和其扩展”、“元件和其扩展”、“功能类样式”、“皮肤类样式”。
特殊型样式：当某个栏目或页面的样式与网站整体差异较大或者维护率较高时，可以独立引用一个样式：“特殊的布局、模块和元件及扩展”、“特殊的功能、颜色和背景”，也可以是某个大型控件或模块的独立样式。
皮肤型样式：如果产品需要换肤功能，那么我们需要将颜色、背景等抽离出来放在这里。
项目模块样式：按照功能合理的拆分模块，依照项目而定。
业务独立样式：当前页面独立的样式，无法被模块化的样式。
例如：
合理有序、合理分组，直观，然后是构建工具会自动完成样式的分组、合并、压缩、版本管理。
5、CSS内部的分类及其顺序
1. 重置（reset）和默认（base）（tags）：消除默认样式和浏览器差异，并设置部分标签的初始样式，以减少后面的重复劳动！你可以根据你的网站需求设置！
2. 通用（common）：通常将公共、通用的模块、布局、元件、皮肤放在这里。
3. 元件、功能、模块，使用2个以上字母开头
按钮（button）可以用 .btn- 开始。
输入框（input）可以用.ipt- 开始。
警告框（alert）可以用 .alert- 开始。
文本（text）可以用 .text- 开始。浮动（pull）可以用 .pull- 开始。字体图标（font-icon）可以用 .fi- 开始。雪碧图标（sprite-icon）可以用 .si- 开始。
4. 状态：常用命名有 active、disabled、hover、focus、closed。
5. 脚本（javascript）可以用 .j- 开始。需要脚本控制的类，使用 j-nav 加上，而不要在css文件内使用它。
6、模块化
合适大小的完整语义化单元为一个模块化。比如一类按钮、一类弹出框、一组雪碧图，或者是页面上的个块区域。
既然是一个模块，那么它就有自己的衍伸、扩展和变体。
书写原则：
从大到小（以选择器的范围为准）
从低到高（以等级上的高低为准）从先到后（以结构上的先后为准）从父到子（以结构上的嵌套为准）
使用短横线和空格区分，最多4个层级，避免过分嵌套，如果层级过多应拆分模块。
每层都必须带上父级名，除非是语义化标签。例如按钮：
.btn{ ... &-primary{ ... } &-success{ ... } } 7、雪碧图
当图片色彩过于丰富且无透明要求时，建议采用 jpg 格式并保存为较高质量。
当图片色彩过于丰富又有透明或半透明要求或阴影效果时，建议采用 png24 格式。
图标之间要保留空隙，保持一定的容错性，并且需要保留原始 PSD 文件。
按照模块或元件，把同属于一个模块或元件的图片进行合并，方便模块或元件的维护。
如图：
使用参考线分隔每个等宽等高的单元格，常用的单元格尺寸为 40px*40px，图标显示大小是20px*20px，因为需要照顾到视网膜屏幕。这样的话，每个图标都不需要重标尺去测量了，只需要数一下单元格的个数。
如图：
8、避免
1. 避免使用 css hack
IE 下的样式可以使用 html 条件注释配合一起使用：
例：
.btn{ background: #eee;} .ie8 .btn{ background: #ccc;} 2. 避免使用 @import
@import('...'); 9、媒体查询
尽量将媒体查询的位置靠近他们相关的规则。不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部。
这样做只会让大家以后更容易忘记他们。这里是一个典型的案例。
.element { ... } .element-avatar { ... } .element-selected { ... } @media (min-width: 480px) { .element { ...} .element-avatar { ... } .element-selected { ... } } 10、编码
样式文件开头
@charset "utf-8"; /* 样式主体 */
11、CSS 预编译
统一使用 scss 来作为 css 预编译工具。
docs:
cli:
12、目录结构
以下是推荐的目录结构
. css |-- varible.scss 公共变量 |-- common 基础样式 | |-- 0-normalize.scss | |-- 1-base.scss | |-- 2-btn.scss | `-- ... |-- modules 模块样式 | |-- header.scss | |-- footer.scss | |-- layout.scss | `-- ... `-- app |-- page1.scss |-- page2.scss `-- ...