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;
}