İkinci örnek için bir yorumum olacak:

Her menü öğesi için background image’ı tekrar tekrar tanımlamışsınız. Teknik olarak doğru gözükse bile bu css sprite olayının temel doğasına aykırı bir görüntü oluyor. Her element için tekrar tekrar bu tanımlamayı yapmak css sprite kullanmayı mantıksızlaştırır.

Bunun yerine tek bir background class’ı tanımlayıp bunu bu background’ı kullanacak tüm elementlere uygulayabilir, akabinde background-position’ları tanımlayacak ayrı id specific style’lar yazabilirsiniz.

Böylece arkaplan image’nı değiştireceğiniz zaman tek bir style içerisinden bu işlemi yapabilirsiniz.

Şimdi bu örnek için anlamsız ancak 150 tane image’ın bulunduğu bir sprite’da işinizi kolaylaştırır.

Öte yandan her background-image tanımlaması ayrı bir http request yapıyor diye biliyorum ki bu da sprite’ın mantığına ters bir davranış oluyor.

Saygılarımla.