二、代码格式

2.1 单行写完一个选择器定义

便于选择器的寻找和阅读，也便于插入新选择器和编辑，便于模块等的识别。去除多余空格，使代码紧凑减少换行。

.c_list li,.c_list h3{width:100px;padding:10px;border:1px solid #ddd;}

如果有嵌套定义，可以采取内部单行的形式。

@media all and (max-width:600px){
    .c_class1 .itm{height:17px;line-height:17px;font-size:12px;}
    .c_class2 .itm{width:100px;overflow:hidden;}
}

2.2 注释 /* 注释文字 */

原则上每个系列的样式都需要有一个注释，言简意赅的表明名称、用途、注意事项等。

注释内容两端需空格，已确保即使在编码错误的情况下也可以正确解析样式。

对选择器的注释统一写在被注释对象的上一行

 /* 块状注释文字*/
.c_list{width:500px;}

对属性及值的注释写于分号后

.c_list li{height:20px;line-height:20px;/* 这里是对line-height的一个注释 */overflow:hidden;}

2.3 小写

选择器、属性和值都使用小写，在xhtml标准中规定了所有标签、属性和值都小写，CSS也是如此。

2.4 空格

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

.selector {}

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

margin: 0;

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

font-family: Arial, sans-serif;

2.5 单位

省略值为0时的单位，为节省不必要的字节同时也使阅读方便，我们将0px、0em、0%等值缩写为0。

2.6 分号

最后一个值也以分号结尾通常在大括号结束前的值可以省略分号，但是这样做会对修改、添加和维护工作带来不必要的失误和麻烦。

2.7 缩进

使用4个空格做为一个缩进层级，不允许使用2个空格 或tab字符

2.8 选择器

>、+、~选择器的两边各保留一个空格。

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