Can I specify multiple CSS classes with one class name?

Question

I have several css classes I'd like to specify on an element. But I don't want to have to repeated place 3, 4 or more classes each time.

I'd like to go from

<span class ="class1 backgroundclass borderclass iconclass">Link</span>

To

<span class="linkClass">Link</span>

Can this be done? If so, how?

Answer 1

In normal CSS, you would have to include .linkClass into every class definition like this:

.class1, .linkClass { ...... }
.backgroundclass, .linkClass { ...... }
.borderclass, .linkClass { ...... }

Not very good for readability.

You could look into CSS pre-processors like LessCSS that make this easier. With LessCSS, it seems to be possible to do the following:

.linkClass {
  .class1;
  .backgroundclass;
  .borderclass;
}

LessCSS will then compile the final style sheet out of this.

Answer 2

What you're asking doesn't really make a lot of sense I'm afraid. :-)

If you want to apply multiple generic CSS classes, simply add them one at a time. If however, you instead have a single CSS class with all of the required properties simply specify that.

Those are pretty much your options I'm afraid, with the choice between the two being whether there would be a significant amount of redundancy within the HTML rather than the CSS. (i.e.: If you're always using two of the generic classes then it makes sense to create a class with the combined properties in CSS.)