4. 格式

最终选择的代码风格必须保证：易于阅读，易于清晰地注释，最小化无意中引入错误的可能性，可生成有用的diff和blame。

在多个选择器的规则集中，每个单独的选择器独占一行。
在规则集的左大括号前保留一个空格。
在声明块中，每个声明独占一行。
每个声明前保留一级缩进。
每个声明的冒号后保留一个空格。
对于声明块的最后一个声明，始终保留结束的分号。
规则集的右大括号保持与该规则集的第一个字符在同一列。
每个规则集之间保留一个空行。

.selector-1,
.selector-2,
.selector-3[type="text"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    font-family: helvetica, arial, sans-serif;
    color: # 333;
    background: # fff;
    background: linear-gradient(# fff, rgba(0, 0, 0, 0.8));
}
.selector-a,
.selector-b {
    padding: 10px;
}

声明顺序

样式声明的顺序应当遵守一个单一的原则。我的倾向是将相关的属性组合在一起，并且将对结构来说比较重要的属性（如定位或者盒模型）
放在前面，先于排版、背景及颜色等属性。

小型的开发团体，可能会想要把相关的属性声明（比如说定位和箱模型）摆在一起。

.selector {
    /* Positioning */
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* Display & Box Model */
    display: inline-block;
    overflow: hidden;
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 10px solid # 333;
    margin: 10px;
    /* Other */
    background: # 000;
    color: # fff;
    font-family: sans-serif;
    font-size: 16px;
    text-align: right;
}

大型团队，则可能更喜欢按字母排序，因为这样做起来很方便，而且维护起来很容易。

例外及细微偏移原则的情况

对于大量仅包含单条声明的声明块，可以使用一种略微不同的单行格式。在这种情况下，在左大括号之后及右大括号之前都应该保留一个空格。

.selector-1 { width: 10%; }
.selector-2 { width: 20%; }
.selector-3 { width: 30%; }

对于以逗号分隔并且非常长的属性值 — 例如一堆渐变或者阴影的声明 — 可以放在多行中，这有助于提高可读性，并易于生成有效的diff。这种情况下有多
种格式可以选择，以下展示了一种格式。

.selector {
    box-shadow:
        1px 1px 1px # 000,
        2px 2px 1px 1px # ccc inset;
    background-image:
        linear-gradient(# fff, # ccc),
        linear-gradient(# f3c, # 4ec);
}

杂项

在十六进制值中，使用小写，如# aaa。
单引号或双引号的选择保持一致。推荐使用双引号，如content: ""。
对于选择器中的属性值也加上引号，如input[type="checkbox"]。
如果可以的话，不要给0加上单位, 如margin: 0。

预处理：格式方面额外的考虑

不同的CSS预处理有着不同的特性、功能以及语法。编码习惯应当根据使用的预处理程序进行扩展，以适应其特有的功能。推荐在使用SCSS时遵守以下指导。

将嵌套深度限制在1级。对于超过2级的嵌套，给予重新评估。这可以避免出现过于详实的CSS选择器。
避免大量的嵌套规则。当可读性受到影响时，将之打断。推荐避免出现多于20行的嵌套规则出现。
始终将@extend语句放在声明块的第一行。
如果可以的话，将@include语句放在声明块的顶部，紧接着@extend语句的位置。
考虑在自定义函数的名字前加上x-或其它形式的前缀。这有助于避免将自己的函数和CSS的原生函数混淆，或函数命名与库函数冲突。

.selector-1 {
    @extend .other-rule;
    @include clearfix();
    @include box-sizing(border-box);
    width: x-grid-unit(1);
    // other declarations
}