One of the lesser known tricks with CSS is the fact that you don't have to limit your elements to just one class. If you need to set multiple classes on an element, you add them simply by separating them with a space in your attribute. For example:
<p class="pullquote btmmargin left">...</p>
This sets the following three classes on that paragraph tag:
- pullquote
- btmmargin
- left
You would assign these as generic classes in your CSS:
.pullquote { ... }
.btmmargin { ... }
p.left { ... }
If you set the class to a specific element, you can still use it as part of a list of classes, but be aware that it will only affect those elements that are specified in the CSS.
Advantages of Multiple Classes
Multiple classes can make it easier to add special effects to elements without having to create a whole new style for that element. For example, you may want to have the ability to float elements to the left or right quickly. You might write two classes "left" and "right" with just "float:left;" and "float:right;" in them. Then whenever you had an element you need to float left you would simply add the class "left" to its class list.
I like to use multiple classes for things that I want to keep standard across the entire site. For example, if I always want the bottom-margin for elements that have a bottom-margin to be 10px. By creating a class that only encompases the botom-margin:10px; I can add it wherever it's needed.
Disadvantages of Multiple Classes
While they are supported in the major browsers, really old browsers don't support them. So you should make sure that the first class you list is the one with the most specific information for that element.
Multiple classes can also get really confusing as you apply more and more to an element.
