关于css的重复定义

div+css重构的时候，发现这一个问题。一个div经常会发生重复的属性需要定义，比如并排的两个div除了边框和背景不同以外，其他的属性都是重复的。难道分别都给他定义吗，浪费了大量的代码，不行，得精简！

比如有两个div

.midl1 {
 width: 280px;
 padding: 2px;
 height: 310px;
 border: 1px solid #A2CE8A;
 background: #F6FCF2;
 float: left;
}
.midl2 {
 width: 280px;
 padding: 2px;
 height: 310px;
 border: 1px solid #A2CE8A;
 background: #F6FCF2;
 float: right;
}

<div class="midl1"></div><div class="midl2"></div>

我们需要把重复的东西单独拿出来定义一次即可

.midl0 {
 width: 280px;
 padding: 2px;
 height: 310px;
 border: 1px solid #A2CE8A;
 background: #F6FCF2;
}
.left { float: left;}
.right { float: right;}

<div class="left midl0"></div><div class="right midl0"></div>

或者更多的div，比如

}
.midl1 {
 width: 280px;
 padding: 2px;
 height: 310px;
 border: 1px solid #A2CE8A;
 background: #F6FCF2;
 float: left;
}
.midl2 {
 width: 280px;
 padding: 2px;
 height: 310px;
 border: 1px solid #A2CE8A;
 background: #F6FCF2;
 float: right;
}
.midl3 {
 width: 280px;
 padding: 2px;
 height: 310px;
 border: 1px solid #F784D6;
 background: #FEF4FC;
 float: left;
}
.midl4 {
 width: 280px;
 padding: 2px;
 height: 310px;
 border: 1px solid #F784D6;
 background: #FEF4FC;
 float: right;
}

<div class="midl1"></div><div class="midl2"></div><div class="midl3"></div><div class="midl4"></div>

精简成这样

.left { float: left;}
.right { float: right;}
.midl0 {
 width: 280px;
 padding: 2px;
 height: 310px;
}
.midl1 {
 border: 1px solid #A2CE8A;
 background: #F6FCF2;
}
.midl2 {
 border: 1px solid #F784D6;
 background: #FEF4FC;
}

<div class="left midl0 midl1"></div><div class="right midl0 midl1"></div><div class="left midl0 midl2"></div><div class="right midl0 midl2"></div>