Let’s say you need six different 100px square boxes with different characteristics:

• Red with Border
• Blue with Border
• Green with Border
• Red without Border
• Blue without Border
• Green without Border

You COULD create a unique class for each of these:

.redwithborder {
 width: 100px;
 height: 100px;
 margin: 10px;
 float: left;
 background-color: red;
 border: 3px solid black;
}

.bluewithborder {
 width: 100px;
 height: 100px;
 margin: 10px;
 float: left;
 background-color: blue;
 border: 3px solid black;
}

...etc

BUT that’s called CSS Bloat because it includes a bunch of unnecessary repetitive code. Instead, create just five classes with simple, identifiable names that each handle something very specific:

.box {
 width: 100px;
 height: 100px;
 margin: 10px;
 float: left;
}

.red {
 background-color: red;
}

.blue {
 background-color: blue;
}

.green {
 background-color: green;
}

.border {
 border: 3px solid black;
}

In your HTML, things look just as clean, just put a space between each of the classes you wish to apply to the div:

<div class="red border box"></div>
<div class="blue border box"></div>
<div class="green border box"></div>
<div class="red box"></div>
<div class="blue box"></div>
<div class="green box"></div>

This method allows better future flexibility as well. If you wanted to create an orange box, or even a box with a background-image or some completely separate characteristic, you could. And then adding a border to that new box is simple adding a space and the “border” class name.

Source: http://css-tricks.com/un-bloat-css-by-using-multiple-classes/