The way you have been doing the stars is fine.
What would be the point of being able to combine the span elements? All it would do is save a very minute amount of typing. If you want to save a bit of typing time, then you could make a class level attribute.
span.star {color:teal;}
span.emptystar {color:gray;}
For 4 out of 5 stars to be gray, it would read as:
<span class="star">★</span>
<span class="emptystar">★★★★</span>