CSS还是得这样子写！！

很多时候，我们可以整合样式 

/* bad */
.box{
    background-color: #fff;
    background-image: url(ceshi.png);
    background-repeat: no-repeat;
    background-position: left top;
}

/* good */
.box{
    background: #fff url(ceshi.png) no-repeat left top;
}

重复的样式省略代码

/* bad */
.box1{
    color: aqua;
    background: blue;
    font-size: 22px;
}
.box2{
    color: aqua;
    background: blue;
    font-size: 22px;
}

/* good */
.box1,.box2{
    color: aqua;
    background: blue;
    font-size: 22px;
}

 善于利用伪类选择器

/* bad */
.box li{
    border-right:1px solid #000;
}
.box li:last-child{
    border-right: none;
}

/* good */
.box li:not(:last-child){
    border-right:1px solid #000;
}

使用rem作为单位

/* bad */
p{
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 8px;
}

/* good */
body{
    font-size: 16px;    
}
p{
    font-size: 1rem;
    line-height: 1.25;
    margin-bottom: 0.5rem;
}

使用样式变量

/* bad */
body{
    background-color: aliceblue;
}
h2{
    border-bottom: 1px solid #ccc;
}
.container{
    color: aliceblue;
    background-color: #fff;
}

/* good */
:root{
    --white:aliceblue;
    --gray:#ccc;
}
body{
  background-color: var(--blue);  
}
h2{
    border-bottom: 1px solid var(--white);
}
.container{
    color: var(--white);
    background-color: var(--gray);
}

 全局设置样式

/* bad */
p{
    margin: 0;
    padding: 0;
}
a{
    margin: 0;
}

/* good */
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

类名的定义避免关键字

/* bad */
.p{
    ...
}


/* good */
.article-par{

}