Css改進樣式

Question

我該如何改進這些CSS以不重複背景位置？我可以在每個圖標內添加一些內容來引用另一個添加背景位置的類嗎？

.icon-add-item { 
    background-image: url("../../../images/Reports/icon_addItem.png"); 
    background-position: 50%; 
} 

.icon-remove-item { 
    background-image: url("../../../images/Reports/icon_removeItem.png"); 
    background-position: 50%; 
} 

.icon-dragdrop-item { 
    background-image: url("../../../images/Reports/icon_layout1_dragDrop.png"); 
    background-position: 50%; 
} 

.icon-filter-column { 
    background-image: url("../../../images/Reports/icon_layout1_filter.png"); 
    background-position: 50%; 
} 

Answer 1

一次指定所有這些階級的共同CSS規則，而不是將其定義爲每個像這樣：

.icon-add-item { 
    background-image: url("../../../images/Reports/icon_addItem.png"); 
} 

.icon-remove-item { 
    background-image: url("../../../images/Reports/icon_removeItem.png"); 
} 

.icon-dragdrop-item { 
    background-image: url("../../../images/Reports/icon_layout1_dragDrop.png"); 
} 

.icon-filter-column { 
    background-image: url("../../../images/Reports/icon_layout1_filter.png"); 
} 

.icon-add-item, .icon-remove-item, .icon-dragdrop-item, .icon-filter-column { 
    background-position: 50%; 
}