css编码规范（一）

1：前言
css最为网页样式的描述语言，一直有着广泛的应用，本文的目的是使得css编码风格保持一致，容易理解和维护。

001：使用4个空格作为一个层级缩进，不允许使用2个空格或者tab字符。

.container {
    width: 100px;
    height: 300px;
}

002：选择器与 { 之间必须包含空格。

.select {
    margin: 0;
}

003：属性名与之后的：之间不允许包含空格，：与属性值之间必须包含空格。

margin: 0;

004：列表型属性值书写在单行时，，后必须跟一个空格。

font-family: Arial, sans-serif;

005：行长度

[强制]每行不得超过129个字符，除非单行不可分割。

解释：

常见不可分割的场景为URL超长。

[建议]对于超长的样式，在样式值得空格处或，后换行，建议按逻辑分组

/* 不同属性值按逻辑分组 */
background:
    transparent url(aVeryVeryVeryLongUrlIsPlacedHere)
    no-repeat 0 0;

/* 可重复多次的属性，每次重复一行 */
background-image:
    url(aVeryVeryVeryLongUrlIsPlacedHere)
    url(anotherVeryVeryVeryLongUrlIsPlacedHere);

/* 类似函数的属性值可以根据函数调用的缩进进行 */
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))
);

006：选择器

[强制]当一个rule包含多个selector时，每个选择器声明必须独占一行

/* good */
.post,
.page,
.comment {
    line-height: 1.5;
}

/* bad */
.post, .page, .comment {
    line-height: 1.5;
}

[强制] >、+、~选择器的两边各保留一个空格

/* good */
main > nav {
    padding: 10px;
}

label + input {
    margin-left: 5px;
}

input:checked ~ button {
    background-color: #69C;
}

/* bad */
main>nav {
    padding: 10px;
}

label+input {
    margin-left: 5px;
}

input:checked~button {
    background-color: #69C;
}

[强制]属性选择器中的值必须用双引号引起来

不允许使用单引号！不允许使用单引号！

/* good */
article[character="juliet"] {
    voice-family: "Vivien Leigh", victoria, female;
}

/* bad */
article[character='juliet'] {
    voice-family: "Vivien Leigh", victoria, female;
}