To get right to the point, when working with sprites, you can set up your sprites in a nice grid and bump the sprite up or down, depending on the context you're using the images for, but if you expect it to work nice and lean, forget about it.

As I have my system setup, I bump the position of the sprite background up or down depending on which icon I'd like to display, whether the article title is a story, link, chat, discussion, email address, etc.

I also have the sprite move left and right depending on its context on the page. If it's an article in the sidebar, it uses a smaller icon, or perhaps if it's hovered, then the sprite is moved sideways to show the red, or green, or grey, or even white versions of the icon.

The beauty of the system, is that in most browsers, you can define the Y Position of the background image (the sprite), or the X Position for each case like so:
background-position-x: -204px;

The problem here is that Firefox doesn't support specifying only one of the axis in this way (thanks @Murtaugh). Apparently they didn't want to change the spec to allow this sort of thing, and the decision was made to wait until CSS4 (or so it seems, thanks @Murtaugh).

The short of it is that you'll have to define both positions in every rule, at least if you're aiming at supporting Firefox… for now.

Retina-device sprite support is another post entirely.