参考：
http://alloyteam.github.io/CodeGuide/ (腾讯前端代码规范)
http://www.waylau.com/css-code-guide/

myDialog {

1. 缩进

使用 soft tab（4个空格）。

.element {
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 10px;
    width: 50px;
    height: 50px;
}

2. 分号

每个属性声明末尾都要加分号。

.element {
    width: 20px;
    height: 20px;
    background-color: red;
}

3. 空格

以下几种情况不需要空格：
▫ 属性名后
▫ 多个规则的分隔符,前
▫ !important !后
▫ 属性值中(后和)前
▫ 行末不要有多余的空格
以下几种情况需要空格：
▫ 属性值前
▫ 选择器>, +,` ~前后 ▫{前 ▫ !important!前 ▫@else前后 ▫ 属性值中的,后 ▫ 注释/*后和*/`前
```
/* not good */
.element {
  color :red! important;
  background-color: rgba(0,0,0,.5);
}
```

/ good /
.element {

color: red !important;
background-color: rgba(0, 0, 0, .5);

}

/ not good /
.element ,
.dialog{

...

}

/ good /
.element,
.dialog {

}

/ not good /
.element>.dialog{

...

}

/ good /
.element > .dialog{

...

}

/ not good /
.element{

...

}

/ good /
.element {

...

}

/ not good /
@if{

...

}@else{

...

}

/ good /
@if {

...

} @else {

...

}


## 4. 空行

* 以下几种情况需要空行：
▫ 文件最后保留一个空行
▫ `}`后最好跟一个空行，包括scss中嵌套的规则
▫ 属性之间需要适当的空行，具体见属性声明顺序

/ not good /
.element {

...

}
.dialog {

color: red;
&:after {
    ...
}

}

/ good /
.element {

...

}

.dialog {

color: red;

&:after {
    ...
}

}


## 5. 换行

* 以下几种情况不需要换行：
▫ {`前

* 以下几种情况需要换行：
▫ `{`后和`}`前
▫ 每个属性独占一行
▫ 多个规则的分隔符`,`后

/ not good /
.element
{color: red; background-color: black;}

/ good /
.element {

color: red;
background-color: black;

}

/ not good /
.element, .dialog {

...

}

/ good /
.element,
.dialog {

...

}


## 6. 注释

* 注释统一用`/* */`（scss中也不要用`//`），具体参照例子的写法；
* 缩进与下一行代码保持一致；
* 可位于一个代码行的末尾，与代码间隔一个空格。

/ Modal header /
.modal-header {

...

}

Modal header
*/
.modal-header {
...
}

.modal-header {

/* 50px */
width: 50px;

color: red; /* color red */

}


##7. 引号

* 最外层统一使用双引号；
* url的内容要用引号；
* 属性选择器中的属性值需要引号。

.element:after {

content: "";
background-image: url("logo.png");

}

li[data-type="single"] {

...

}


##8. 命名

* css 元素名称以及id和类名的命名也是**区分大小写**的（但是属性和值不区分）
* 类名使用小写字母，以中划线`-`分隔
* id采用驼峰式命名
* scss中的变量、函数、混合、placeholder采用驼峰式命名

/ class /
.element-content {

...

}

/ id /

myDialog {

...

}

/ 变量 /
$colorBlack: #000;

/ 函数 /
@function pxToRem($px) {

...

}

/ 混合 /
@mixin centerBlock {

...

}

/ placeholder /
%myDialog {

...

}



##9. 属性声明顺序

* 相关的属性声明按例子的顺序做分组处理，组之间需要有一个空行。

.declaration-order {

display: block;
float: right;

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;

border: 1px solid #e5e5e5;
border-radius: 3px;
width: 100px;
height: 100px;

font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
text-align: center;

color: #333;
background-color: #f5f5f5;

opacity: 1;

}
// 下面是推荐的属性的顺序
[

[
    "display",
    "visibility",
    "float",
    "clear",
    "overflow",
    "overflow-x",
    "overflow-y",
    "clip",
    "zoom"
],
[
    "table-layout",
    "empty-cells",
    "caption-side",
    "border-spacing",
    "border-collapse",
    "list-style",
    "list-style-position",
    "list-style-type",
    "list-style-image"
],
[
    "-webkit-box-orient",
    "-webkit-box-direction",
    "-webkit-box-decoration-break",
    "-webkit-box-pack",
    "-webkit-box-align",
    "-webkit-box-flex"
],
[
    "position",
    "top",
    "right",
    "bottom",
    "left",
    "z-index"
],
[
    "margin",
    "margin-top",
    "margin-right",
    "margin-bottom",
    "margin-left",
    "-webkit-box-sizing",
    "-moz-box-sizing",
    "box-sizing",
    "border",
    "border-width",
    "border-style",
    "border-color",
    "border-top",
    "border-top-width",
    "border-top-style",
    "border-top-color",
    "border-right",
    "border-right-width",
    "border-right-style",
    "border-right-color",
    "border-bottom",
    "border-bottom-width",
    "border-bottom-style",
    "border-bottom-color",
    "border-left",
    "border-left-width",
    "border-left-style",
    "border-left-color",
    "-webkit-border-radius",
    "-moz-border-radius",
    "border-radius",
    "-webkit-border-top-left-radius",
    "-moz-border-radius-topleft",
    "border-top-left-radius",
    "-webkit-border-top-right-radius",
    "-moz-border-radius-topright",
    "border-top-right-radius",
    "-webkit-border-bottom-right-radius",
    "-moz-border-radius-bottomright",
    "border-bottom-right-radius",
    "-webkit-border-bottom-left-radius",
    "-moz-border-radius-bottomleft",
    "border-bottom-left-radius",
    "-webkit-border-image",
    "-moz-border-image",
    "-o-border-image",
    "border-image",
    "-webkit-border-image-source",
    "-moz-border-image-source",
    "-o-border-image-source",
    "border-image-source",
    "-webkit-border-image-slice",
    "-moz-border-image-slice",
    "-o-border-image-slice",
    "border-image-slice",
    "-webkit-border-image-width",
    "-moz-border-image-width",
    "-o-border-image-width",
    "border-image-width",
    "-webkit-border-image-outset",
    "-moz-border-image-outset",
    "-o-border-image-outset",
    "border-image-outset",
    "-webkit-border-image-repeat",
    "-moz-border-image-repeat",
    "-o-border-image-repeat",
    "border-image-repeat",
    "padding",
    "padding-top",
    "padding-right",
    "padding-bottom",
    "padding-left",
    "width",
    "min-width",
    "max-width",
    "height",
    "min-height",
    "max-height"
],
[
    "font",
    "font-family",
    "font-size",
    "font-weight",
    "font-style",
    "font-variant",
    "font-size-adjust",
    "font-stretch",
    "font-effect",
    "font-emphasize",
    "font-emphasize-position",
    "font-emphasize-style",
    "font-smooth",
    "line-height",
    "text-align",
    "-webkit-text-align-last",
    "-moz-text-align-last",
    "-ms-text-align-last",
    "text-align-last",
    "vertical-align",
    "white-space",
    "text-decoration",
    "text-emphasis",
    "text-emphasis-color",
    "text-emphasis-style",
    "text-emphasis-position",
    "text-indent",
    "-ms-text-justify",
    "text-justify",
    "letter-spacing",
    "word-spacing",
    "-ms-writing-mode",
    "text-outline",
    "text-transform",
    "text-wrap",
    "-ms-text-overflow",
    "text-overflow",
    "text-overflow-ellipsis",
    "text-overflow-mode",
    "-ms-word-wrap",
    "word-wrap",
    "-ms-word-break",
    "word-break"
],
[
    "color",
    "background",
    "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
    "background-color",
    "background-image",
    "background-repeat",
    "background-attachment",
    "background-position",
    "-ms-background-position-x",
    "background-position-x",
    "-ms-background-position-y",
    "background-position-y",
    "-webkit-background-clip",
    "-moz-background-clip",
    "background-clip",
    "background-origin",
    "-webkit-background-size",
    "-moz-background-size",
    "-o-background-size",
    "background-size"
],
[
    "outline",
    "outline-width",
    "outline-style",
    "outline-color",
    "outline-offset",
    "opacity",
    "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
    "-ms-filter:"progid:DXImageTransform.Microsoft.Alpha",
    "-ms-interpolation-mode",
    "-webkit-box-shadow",
    "-moz-box-shadow",
    "box-shadow",
    "filter:progid:DXImageTransform.Microsoft.gradient",
    "-ms-filter:"progid:DXImageTransform.Microsoft.gradient",
    "text-shadow"
],
[
    "-webkit-transition",
    "-moz-transition",
    "-ms-transition",
    "-o-transition",
    "transition",
    "-webkit-transition-delay",
    "-moz-transition-delay",
    "-ms-transition-delay",
    "-o-transition-delay",
    "transition-delay",
    "-webkit-transition-timing-function",
    "-moz-transition-timing-function",
    "-ms-transition-timing-function",
    "-o-transition-timing-function",
    "transition-timing-function",
    "-webkit-transition-duration",
    "-moz-transition-duration",
    "-ms-transition-duration",
    "-o-transition-duration",
    "transition-duration",
    "-webkit-transition-property",
    "-moz-transition-property",
    "-ms-transition-property",
    "-o-transition-property",
    "transition-property",
    "-webkit-transform",
    "-moz-transform",
    "-ms-transform",
    "-o-transform",
    "transform",
    "-webkit-transform-origin",
    "-moz-transform-origin",
    "-ms-transform-origin",
    "-o-transform-origin",
    "transform-origin",
    "-webkit-animation",
    "-moz-animation",
    "-ms-animation",
    "-o-animation",
    "animation",
    "-webkit-animation-name",
    "-moz-animation-name",
    "-ms-animation-name",
    "-o-animation-name",
    "animation-name",
    "-webkit-animation-duration",
    "-moz-animation-duration",
    "-ms-animation-duration",
    "-o-animation-duration",
    "animation-duration",
    "-webkit-animation-play-state",
    "-moz-animation-play-state",
    "-ms-animation-play-state",
    "-o-animation-play-state",
    "animation-play-state",
    "-webkit-animation-timing-function",
    "-moz-animation-timing-function",
    "-ms-animation-timing-function",
    "-o-animation-timing-function",
    "animation-timing-function",
    "-webkit-animation-delay",
    "-moz-animation-delay",
    "-ms-animation-delay",
    "-o-animation-delay",
    "animation-delay",
    "-webkit-animation-iteration-count",
    "-moz-animation-iteration-count",
    "-ms-animation-iteration-count",
    "-o-animation-iteration-count",
    "animation-iteration-count",
    "-webkit-animation-direction",
    "-moz-animation-direction",
    "-ms-animation-direction",
    "-o-animation-direction",
    "animation-direction"
],
[
    "content",
    "quotes",
    "counter-reset",
    "counter-increment",
    "resize",
    "cursor",
    "-webkit-user-select",
    "-moz-user-select",
    "-ms-user-select",
    "user-select",
    "nav-index",
    "nav-up",
    "nav-right",
    "nav-down",
    "nav-left",
    "-moz-tab-size",
    "-o-tab-size",
    "tab-size",
    "-webkit-hyphens",
    "-moz-hyphens",
    "hyphens",
    "pointer-events"
]

]


## 10. 颜色

* 使颜色16进制用小写字母；
* 颜色16进制尽量用简写。

/ not good /
.element {

color: #ABCDEF;
background-color: #001122;

}

/ good /
.element {

color: #abcdef;
background-color: #012;

}


##11. 属性简写

* 属性简写需要你非常清楚属性值的正确顺序，而且在大多数情况下并不需要设置属性简写中包含的所有值，所以建议尽量分开声明会更加清晰；
* margin 和 padding 相反，需要使用简写；
* 常见的属性简写包括：
▫ font
▫ background
▫ transition
▫ animation

/ not good /
.element {

transition: opacity 1s linear 2s;

}

/ good /
.element {

transition-delay: 2s;
transition-timing-function: linear;
transition-duration: 1s;
transition-property: opacity;

}


## 12. 媒体查询
**尽量将媒体查询的规则靠近与他们相关的规则**，不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部，这样做只会让大家以后更容易忘记他们。

.element {

...

}

.element-avatar{

...

}

@media (min-width: 480px) {

.element {
    ...
}

.element-avatar {
    ...
}

}

##13. 杂项

* 不允许有空的规则；
* 元素选择器用小写字母；
* **去掉小数点前面的0；**
* 去掉数字中不必要的小数点和末尾的0；
* **属性值`0`后面不要加单位；**
* 禁止使用`expression`表达式；
* 禁止滥用`!important`；
* 同个属性不同前缀的写法需要在垂直方向保持对齐，具体参照右边的写法；
* 无前缀的标准属性应该写在有前缀的属性后面；

-ms-transform:rotate(7deg); //-ms代表ie内核识别码
-moz-transform:rotate(7deg); //-moz代表火狐内核识别码
-webkit-transform:rotate(7deg); //-webkit代表谷歌内核识别码
-o-transform:rotate(7deg); //Opera15以前加 -o-，Opera15及以后加 -webkit-。
transform:rotate(7deg); //统一标识语句,符合w3c标准

* 不要在同个规则里出现重复的属性，如果重复的属性是连续的则没关系；
* 不要在一个文件里出现两个相同的规则；
* 用 `border: 0;` 代替 `border: none;`；
* 在保证选择器准确的情况下尽量简化选择器 (尽量不超过4级，最多4级)，不写多余的选择器(如class/id前的标签选择器、li上一级的的ul/ol、dt/dd上一级的dl等，在保证准确的前提下能去掉的都去掉)（在`scss`中如果超过4层应该考虑用嵌套的方式来写）；
* **尽量少用`*`选择器。**

/ not good /
.element {
}

/ not good /
LI {

...

}

/ good /
li {

...

}

/ not good /
.element {

color: rgba(0, 0, 0, 0.5);

}

/ good /
.element {

color: rgba(0, 0, 0, .5);

}

/ not good /
.element {

width: 50.0px;

}

/ good /
.element {

width: 50px;

}

/ not good /
.element {

width: 0px;

}

/ good /
.element {

width: 0;

}

/ not good /
.element {

border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;

background: linear-gradient(to bottom, #fff 0, #eee 100%);
background: -webkit-linear-gradient(top, #fff 0, #eee 100%);
background: -moz-linear-gradient(top, #fff 0, #eee 100%);

}

/ good /
.element {

-webkit-border-radius: 3px;
   -moz-border-radius: 3px;
        border-radius: 3px;

background: -webkit-linear-gradient(top, #fff 0, #eee 100%);
background:    -moz-linear-gradient(top, #fff 0, #eee 100%);
background:         linear-gradient(to bottom, #fff 0, #eee 100%);

}

/ not good /
.element {

color: rgb(0, 0, 0);
width: 50px;
color: rgba(0, 0, 0, .5);

}

/ good /
.element {

color: rgb(0, 0, 0);
color: rgba(0, 0, 0, .5);

}


* 避免使用 @import语句。如果使用了@import语句，一定要将它们写在样式表开头，保证它的优先级低于样式表中的其他规则；与 `<link>` 标签相比，`@import` 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种：
▫ 使用多个 `<link>` 元素
▫ 通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件
▫ 通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能
▫ 请参考 http://www.stevesouders.com/blog/2009/04/09/dont-use-import/ 了解更多知识。

~~~