With a loop you only need to pass in the rating. Get the modulus and then the floor. Render as many full stars as the floor, a half star if modulus was more than zero, then render an empty star as far as the number of full stars + half stars rendered was less than the number of stars that should be displayed (e.g. 5.)
In an app I'm making, each group of items can have a different rating size, as defined by the group's admin. So the sprite with a fixed number of stars wouldn't work.
Essentially, I see a number of stars as just a different sort of a "progress-bar"-like graphic, so it's not necessary to set individual stars in the HTML. Just set it as a horizontally-repeating background, with predefined "steps" od the overlay, and the only number you need to pass from the server is the step level. This can even show a partial star if you want.
P.S. I haven't read the OP article prior to writing this comment; that's essentially what they're advising there.
This is avoided by rendering each star/half star/empty star as an li or a div, defining common styles like width, height and positioning and then background images for each.
That's way less work than all that CSS.