多个之前的陈述.有没有办法使用更少的代码来做同样的事情？

Question

我有一些用于制作按钮的css代码.我正在使用伪元素来创建我的按钮图标,并从精灵表中加载我的按钮.在我的例子中,我有3个按钮,但有时我有更多.

如果你研究我的CSS你可以看到每个伪元素之间唯一变化的是精灵位置.所以很多代码都在重复.

无论如何我可以使用更少的代码,但做同样的事情？

.add_button,
.excel_button,
.history_button {
    color: #000;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 2px;
    border-radius: 5px;
    border: 2px solid #009900;
    height: 25px;
    width: 165px;
    margin-bottom: 5px;
    cursor: pointer;
    font-weight: 500;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    -webkit-user-select: none;  
    -moz-user-select: none;    
    -ms-user-select: none;      
    user-select: none;
     position: relative; 
}
.add_button::before {
    content: "";
    width: 25px;
    height: 25px;
    background: url("../../images/buttons/buttons_25x25.png") 0px 0px no-repeat;
    float: left; 
    margin: -1px 10px 0px 0;
}
.excel_button::before {
    content: "";
    width: 25px;
    height: 25px;
    background: url("../../images/buttons/buttons_25x25.png") -99px -50px no-repeat;
    float: left; 
    margin: -1px 10px 0px 0;
}
.history_button::before {
    content: "";
    width: 25px;
    height: 25px;
    background: url("../../images/buttons/buttons_25x25.png") -125px 0px no-repeat;
    float: left; 
    margin: -1px 10px 0px 0;
}

Answer 1

这样的事情？

.add_button::before, .excel_button::before, .history_button::before {
    content: "";
    width: 25px;
    height: 25px;
    background: url("../../images/buttons/buttons_25x25.png") 0 0 no-repeat;
    float: left; 
    margin: -1px 10px 0 0;
}
.excel_button::before {
    background-position: -99px -50px;
}
.history_button::before {
    background-position: -125px 0;
}