组合多个CSS元素

Question

组合这些CSS元素的最佳方式是什么？

随着我的网页的增长，我非常关心维护。除了使用的bg图像之外，下面没有太多区别，所以我想知道是否有办法让代码更易于维护。

#section3 { 
    background: url(../img/img2.jpg) no-repeat center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    position: relative; 
    z-index: 1; 
} 
@media only screen and (min-width: 0px) and (max-width: 768px) { 
    #section3 { 
     height: 30em; 
    } 
} 
@media only screen and (min-width: 769px) { 
    #section3 { 
     height: 50em; 
    } 
} 

#section5 { 
    background: url(../img/img3.jpg) no-repeat center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    position: relative; 
    z-index: 1; 
} 
@media only screen and (min-width: 0px) and (max-width: 768px) { 
    #section5 { 
     height: 30em; 
    } 
} 
@media only screen and (min-width: 769px) { 
    #section5 { 
     height: 50em; 
    } 
} 

#section7 { 
    background: url(../img/img4.jpg) no-repeat center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    position: relative; 
    z-index: 1; 
} 
@media only screen and (min-width: 0px) and (max-width: 768px) { 
    #section7 { 
     height: 30em; 
    } 
} 
@media only screen and (min-width: 769px) { 
    #section7 { 
     height: 50em; 
    } 
} 

Answer 1

我会建议像这样的Fiddle。

#section3 { 
    background: url(../img/img2.jpg) no-repeat center center; 
} 

#section5 { 
    background: url(../img/img3.jpg) no-repeat center center; 
} 

#section7 { 
    background: url(../img/img4.jpg) no-repeat center center; 
} 

#section7, #section5, #section3 { 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    position: relative; 
    z-index: 1; 
} 

@media only screen and (min-width: 0px) and (max-width: 768px) { 
    #section7, #section5, #section3 { 
     height: 30em; 
    } 
} 
@media only screen and (min-width: 769px) { 
    #section7, #section5, #section3 { 
     height: 50em; 
    } 
} 

也许你也看看LESS或SASS。