CSS: multiple classes

CSS classes can actually be combined together on the same element to get interesting results due to the cascade. As I said in an earlier post, CSS classes can be used to create cumulative styles, thus resulting in a more flexible and reusable code.

For example, suppose that you have some floated images. You want that some of these images show a doubled border and in this case there are two classes that can be joined together:

.alignleft {
  float: left;
  margin-right: 5px;
}

.picture {
    padding: 5px;
    border: 5px double #aaa;
}

Then you add the above classes on an img element, like so:

<img src="pic.gif" alt="Picture" class="alignleft picture" />

However, there are a few things to keep in mind when using a solution like this. First, you should always specify style rules that don't conflict with each other. If you don't do so, then the cascading rules will decide what rule is the winner (e.g. when a class comes first or later in the source or when a rule is followed by an !important statement). Second, Internet Explorer 6 has a really poor support to multiple classes, so it's sometimes very difficult to select an element with two or more classes applied to it.

Anyway, if you aren't really worried about these issues, then multiple classes can actually be a useful way to apply styles in an elegant, reusable and semantic way.