Reuse classes in an id based css

Question

I have a id based CSS file where I noticed I'm mostly repeating myself. What I'd like to do is specify that an item with an id follows a certain class + some other rules. For example: I'd like id id1 to have all the properties of class LinkButton applied as well as the value back-color: green. Is there a way to do this in the css file? Is there a better way to do what I'm looking at?

Answer 1

You can specify multiple selectors on a given set of properties, like this:

.LinkButton , #id1 { color: red; border: solid 1px blue; } /* Both get these */
#id1 { back-color: green; } /* Adding rules */

It can also override any of the properties if you need:

.LinkButton , #id1 { color: red; back-color: red; } /* Both get these */
#id1 { back-color: green; } /* Changing rules */

Or you give the element the class and ID:

<div id="id1" class="LinkButton ">

Answer 2

There's no need to work with ID based style sheets. Avoiding repetition is exactly what classes are there for. Why not use classes instead of IDs? They are much more flexible, and take away nothing. (You can still target speficic elements.)

You can combine multiple CSS classes wonderfully (except for IE6, whose interpretation of multiple classes is broken.)

<span class="info extrabig highlight"> Important hint </span>

if you have a particular element that needs really specific rules, then give it a class named after its ID:

 <span id="really_special" class="id_really_special info extrabig highlight">

and define the unique properties of the element in the .id_really_special class.

IDs are there to access elements through the DOM imo. Styling should really be left to classes.