Is there any way to reuse/compact CSS to make it smaller and cleaner?

I have the following styles in an external CSS file.

.callButton {
  width: 100px;
  height: 25px;
  float: right;
  /* other styles here */
  background-img: url('images/callButton.png');
}

.otherButton {
  width: 100px;
  height: 25px;
  float: right;
  /* same styles from callButton here */
  background-img: url('images/otherButton.png');
}

/* 5 more similar buttons */

As you can see, only the property background-img is different, but I've to use different classes for each o开发者_开发知识库f them. Is there any way I can use the same classes for the common property and something different (like a variable) for the background-img property?

You're going to want something like this, methinks:

.button {
    width: 100px;
    height: 25px;
    float: right;
}

.callButton {
    background-img: url('images/callButton.png');
}

.otherButton {
    background-img: url('images/otherButton.png');
}

Then, change your HTML to be:

<span class="button otherButton"></span>

You can definitely simplify this somewhat, with something like:

.callButton, .otherButton, ...other buttons... {
    width: 100px;
    height: 25px;
    float: right;
}

.callButton {
    background-img: url('images/callButton.png');
}

.otherButton {
    background-img: url('images/otherButton.png');
}

Make the cascade, cascade

.callButton, .otherButton 
{
   width: 100px;
   height: 25px;
   float: right;
  }  
.callButton {
   background-img: url('images/callButton.png');
 }  
.otherButton {
   background-img: url('images/otherButton.png'); 
}

Using the multiple selectors achives the same effect, but makes your style easier to read, consistent and allows only the "different" parts to be separated.

NOTE: the comma separation of the class notations says "apply to each of these" on that first line.

The obvious answer is to give all the relevant elements the same class. This would work even if you need to keep the existing class names for other reasons, as you are allowed to specify multiple classes.

.allButtons {
  width: 100px;
  height: 25px;
  /* etc */
}

.callButton {
  background-img: url('images/callButton.png');
}

with HTML like this:

<div class='allButtons callButton'>Call</div>
<div class='allButtons otherButton'>Other</div>
etc...

(by the way, if 'callButton' is unique, you could also use that as the ID rather than a class; it would make more sense. But it'll work fine as a class too)

If you don't want to do that (eg you can't change the HTML), then you can specify all the classes in the CSS with a single set of styles, using commas:

.callButton, otherButton, yetanotherButton, etc {
  width: 100px;
  height: 25px;
  float: right;
  /* other styles here */
}

.callButton {
  background-img: url('images/callButton.png');
}

Finally, although the above solutions will be fine for you in this case, if you want to write more consise stylesheets in general, you might also want to look up products like LESS, which extend the syntax of CSS to make it easier to work with. You then have to convert it to normal CSS before deployment to your site, but for development purposes, it's a neat little tool.

All buttons with the same CSS rules would be placed together

 .button1, .button2, .button3, .button4, .button5 {width: 100px; 
 height: 25px; float: right; /* other styles here */}  

Then each individual button can receive its own background or other specific styles:

 .button1 {background-img: url('images/callButton.png';) 
 etc.

In this way, your HTML does not need to have multiple classes on the relevant divs.