0

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.
KenAshton
  • 109
  • 1
  • 11

2 Answers2

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

Raekye
  • 5,081
  • 8
  • 49
  • 74
  • Thanks Raeki. Not being a CSS expert, I'm uncomfortable with assignments to base tags alone, like a, as I presumed it could propagate to all a tags. a.img0, a,img1, ... doesn't help because they cannot share the same background position. That is why I attempted to use class .imga to hold everything except the positions (all in one selector and works ok) but I then cannot add the individual background-position's, because class='imga p0' doesn't seem to work. Hope I haven't misunderstood you answer, and my reasoning could well be wrong. – KenAshton May 02 '12 at 03:49
  • Yep - I added a few more solutions I'm not sure if you saw them (updated about the same time). `class="imga p0"` doesn't work do I understand? The last thing I listed is also an option, to do `a.imag0, a.imag1, a.imag2..` maybe not the very best but it's commonly used and saves the code repetition – Raekye May 02 '12 at 03:52
  • Raeki, that was awesome, very informative it and works. Thank you so much for the time spent and use of your brains. – KenAshton May 02 '12 at 04:05
0

Adding this just in case some one refers to this post later.

You can generate the most optimized CSS using this below tool. http://www.spritecss.com/

Rupesh Jain
  • 168
  • 3
  • 11