Multiple classnames can be used to give an HTML element a more generic style in addition to a more specific one in order to make styling easier and more logical.
To organize your classnames, go from generic to more specific (just a nice way to organize classes, has no effect on how classes are applied). You must separate multiple classnames with spaces (don’t use commas).
Example:
<div class="column main-column">
some content
</div>
You could use this to apply general styles to all your “column” elements in addition to extra more specific styles for just your “main-column” elements. (If you are sure that the element will be unique then you can just use an id in addition to the generic classname rather than giving it multiple class names.)
NOTE: The order of the class names in the HTML has no effect on how they are applied. In the case of two conflicting style rules in your stylesheet, the last style listed in your CSS will be applied following normal cascading rules.
Identifying and Styling Form Elements:
You could use multiple class names to identify all text elements as well as all text elements intended to be used to input URLs in a form. (The “text” classname is mainly for the benefit of Internet Explorer 6 which doesn’t understand CSS attribute selectors.)
<input type="type" style="text url-input">
IE6 Bug Caution
http://www.thunderguy.com/semicolon/2005/05/16/multiple-class-selectors-in-internet-explorer/
Most browsers support combining multiple CSS classes to select an element in your style sheet.
Example:
<div class="bottom pager pager-bottom"></div>
In browsers other than IE6 you could select this div with the following CSS:
.bottom.pager {margin-top: 15px;}
This doesn’t work in IE6 so you must add an extra more specific class name such as “pager-bottom” in order to select it. (Or select it in an alternate way such as by its container if applicable.)
CSS Web Design 