CSS 代码格式规范
良好的代码组织模式，可能提高可读性，对于团队开发和前期维护的意义显而易见。
再强调一下，前面所谓规范只是最佳实际，并不具备强迫性，目标是提高团队开发效率和前期维护的便利性。
也就是说，即便不遵守前面的规范，代码依然有效，本文分享几种常见的可以提高可读性的规范供大家参考自创。
当然，还有其余模式提高可读性，比如科学的CSS属性陈列与引号利用，思考到篇幅，参阅其余相干文章。
（1）.代码缩进：
失当的缩进可能使代码愈加明晰，便于团队和做或许前期维护。
当然，在实践部署的时分，能够会停止紧缩，这不是本文要关注的。
缩进两个空格，不能利用tab或许tab与空格混搭停止缩进，代码片段如下：
[CSS] 纯文本查看 复制代码
.selector { padding:15px; margin:0px 0px 15px; }（2）.抉择器分组换行：
关于分组抉择器的根本用法可能参阅CSS E,F 抉择器一章节。
可能将造成分组的子抉择器单独占据一行，这样会愈加明晰，代码示例如下：
[CSS] 纯文本查看 复制代码
.selector, .selector-secondary, .selector[type="text"] { padding: 15px; margin-bottom: 15px; background-color: rgba(0,0,0,.5); }上面的代码是不是愈加明晰，再强调一下，我们这是便于开发与团队合作优先。
至于上述模式能够会添加的额外累赘，可能经过紧缩等模式来消弭。
（3）.空格与换行：
为了可读性或许说为了难看，建议在抉择器与大括号之间减少一个空格。
可能看到，抉择器前面加了一个空格，看起来愈加温馨一些。
同时，大括号的后半局部（}）需求单独占据一行。
CSS主体局部的每一申明也需求肯定的格式：
（1）.申明的冒号（:）与属性值之间减少一个空格。
（2）.每一条申明需求单独占据一行。
（3）.最后一条申明语句前面的分号是可能省略的，然而建议保留。
（4）.假设大括号中只要一条申明语句，那么大括号可能在同一行，代码如下：
[CSS] 纯文本查看 复制代码
.selector { padding: 15px; }有些属性的属性值可能是多个，那么属性值之间需求额外空格，以提高可读性。
代码片段如下：
[CSS] 纯文本查看 复制代码
div{ padding: 15px; margin-bottom: 15px; background-color: rgba(0,0,0,.5); box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff; }对于box-shadow类似属性值，值之间用逗号分隔，并且额外减少一个空格，假设属性值较多，可能停止换行缩进操作，以提高可读性，以background-image属性为例子，代码片段如下：
[CSS] 纯文本查看 复制代码
div{ background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.04, rgb(88,94,124)), color-stop(0.52, rgb(115,123,162)) ); }然而 rgb()、rgba()、hsl()、hsla() 或 rect() 的参数不需求减少空格。
>、+、~等抉择器两端也要减少空格，否则视觉上看起来过于拥堵，代码演示如下：
[CSS] 纯文本查看 复制代码
main > nav { padding: 10px; } label + input { margin-left: 5px; } input:checked ~ button { background-color: #69C; }（4）.CSS规则之间添加一行：
为了添加可读性，CSS规则之间利用一个空行分隔。
代码片段如下：
[CSS] 纯文本查看 复制代码
.selector-secondary { display: block; width: 200px; } .selector-three { display: span; font-size: 12px; }上面的代码可读性会显著提高，尤其是在代码量大的时分，否则看起来十分拥堵。
（5）.简写属性：
CSS中有很多复合属性，如有能够，最好利用属性的简写方式。
