Esta es una practica que no he visto que sea muy extendida pero que es de las mas eficientes para un maquetador por la buena organización que presenta.

La idea es simple. creas un selector para el sprite, un selector por imagen del sprite y por ultimo vas asignándole el par class=”un-elemento-x sprite icono-del-sprite”

Pongo un ejemplo de como armaríamos la base CSS:

/*Primero defino el sprite*/
.sprite {
    background: url(sprite.png) #transparent no-repeat;
}

/*Ahora los class de las imagenes contenidas en el sprite*/

.sprite .destacado { background-position: 0 -462px;  }
.sprite .aceptado { background-position: 0 0;  }
.sprite .cancelado { background-position: 0 -66px;  }
.sprite .editado { background-position: 0 -132px;  }
.sprite .eliminado { background-position: 0 -198px;  }
.sprite .rss { background-position: 0 -264px;  }
.sprite .me-gusta { background-position: 0 -330px;  }
.sprite .bloqueado { background-position: 0 -396px;  }

Para terminar un ejemplo practico:

<ul>
    <li class="sprite destacado">Elementos destacados 50</li>
    <li class="sprite cancelado">Elementos cancelados 10</li>
    <li class="sprite eliminado">Elementos eliminados 200</li>
</ul>

Chau.