bueno, supongo que la 2da forma será mejor porque llamas solo una vez la imagen, además de lucir más prolijo y de ser más mantenible por el hecho de tener una imagen por cada clase.
Personalmente opto por hacer mis sprites de la segunda forma. es decir:
Código CSS:
Ver original.clase1, .clase2, .claseN{
background:url("path/img.xxx") 0 0 no-repeat;
/*... otros estilos comunes a todas las clases ...*/
}
.clase1{width:...; height:...; background-position:0 0;}
.clase2{width:...; height:...; background-position:-25px 0;}
.claseN{width:...; height:...; background-position:-50px 0; background-repeat:repeat;}
Esta herramienta para crear
sprites dinámicos (muy buena) también trabaja de esta forma, lo que indica que es un buen método.
Saludos.