Question

Had a few problems getting background-image displaying in Firefox, I made it work but was surprised at how bloated the CSS became. It now works great, but I need to replicate base CSS code for multiple images.

Can anyone tell me if it is possible to optimise the CSS classes and minimise the amount of code. I cannot utilize the already used id’s, and class=’imga p0′ doesn’t work (where p0 just holds the background-position, becoming p1, p2, p3 .. for each image position).

Thanks in advance for any advice.

a.imga0 {background:url(../images/sprite.png) no-repeat;background-color:transparent;
  display:block;width:24px;height:24px;background-position:-288px 0;} /* tick green */
a.imga1 {background:url(../images/sprite.png) no-repeat;background-color:transparent;
  display:block;width:24px;height:24px;background-position:-312px 0;} /* cross grey */
a.imga2 { .....  and so on.

Answer 1

Edit:
So this should eliminate the repetition

/* template */
a.imag0, a.imag1, a.imag2 {
    display: block;
    width: 24px;
    height: 24px;
    background:url(../images/sprite.png) no-repeat;background-color:transparent;
}

/* specifications */
a.imag0 {
    background-position:-288px 0;
}
a.imag1 {
    background-position:-312px 0;
}

For one you could create a general selector

a {
    background:url(../images/sprite.png) no-repeat;background-color:transparent;
    display: block;
}

Which would apply the general style, such as the sprite image.

You could also create a separate class (specify more classes with spaces)

So for example, you could have

<a class="imag0 spriteclass">something</a>
<a class="imag1 spriteclass">something</a>
<a class="imag2 spriteclass">something</a>

And

a.spriteclass {
    //again the template, such as the sprite and display type and width
}

Your second option is to list out the selectors you want the css to apply to,

a.imag0, a.imag1, a.imag2... {
    // your general css
}

And then like above specify the specific sprite positions and details separately