複数の画像に対してスプライトCSSを最適化する

Question

Firefoxで背景画像を表示するにはいくつかの問題がありましたが、動作させましたが、CSSがどのように肥大化したかには驚きました。今は素晴らしいですが、私は複数の画像のベースCSSコードを複製する必要があります。

CSSクラスを最適化してコードの量を最小限に抑えることができるかどうかは誰にでも教えてください。私はすでに使用されているIDを利用することはできませんし、class = 'imga p0'は機能しません（p0はバックグラウンド位置を保持し、各画像位置に対してp1、p2、p3になります）。

アドバイスを事前にいただきありがとうございます。

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

編集：1の場合 だから、これは重複を排除すべきである

/* 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; 
} 

次のような一般的なスタイルを、適用する

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

一般的なセレクタを作成することができますスプライト画像。

また、別のクラス（スペースで複数のクラスを指定する）

したがって、たとえば、あなたが

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

そして

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

あなたの2番目のオプションを持っている可能性を作成することができますCSSに適用するセレクタを一覧表示することです。

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

そして上記のように、いくつかの一つは後でポストを指すだけの場合にこれを追加別々

Answer 2

を特定スプライトの位置および詳細を指定。

このツールを使用して、最適化されたCSSを生成することができます。 http://www.spritecss.com/