CSS样式规则，单行还是多行？

[switer]

定义： 单行风格 CSS单行风格编码，实例如下：

.header {width:100%;height:40px;background-color:white;color:black;}
    .header .back {width:50px;float:left;}
    .header .title {font-size:14px;}

多行风格

.header {
    width:100%;
    height:40px;
    background-color:white;
    color:black;
}
.header .back {
    width:50px;
    float:left;
}
.header .title {
    font-size:14px; 
}

单行+层级缩进风格让CSS富有层次感，更直观地反映HTML的结构，带来的好处有：

1. 样式文件篇幅较短，有层次结构，易于我们定位查找元素样式
2. 利于粒度更小的组件抽象，样式按HTML结构摆在一起，对应的元素们的样式可以清晰地剥离 缺点：
3. 容易出现单行样式过长，超过一屏，不利于阅读，出现该问题时建议折行再缩进。
4. 样式规则在一行，定位具体的样式规则相对麻烦