do not use em/rem in css sprite definitions
I just found this:
background: image-url("sprites_arrows.png") no-repeat scroll 0 -2.4rem transparent;Maybe I miss something but what's the point of using a relative unit for a sprite definition?
Sprites are organized in a well defined pixel grid. So just use the px output of your sprite building app to set the positions. Do not use relative units. There is absolutely no point of using relative units in a fixed unit environment like a sprite grid. And if you`re doing so, you are probably building your sprites manually. Think about getting a sprite building app like TexturePacker or SpriteRight.
In the rare cases you actually COULD rely on your rem value, I bet it is over engineered because the px based grid would be faster- do not code for your ego.
And if you have the great idea to combine relative units with background-size to fit your single shape set into bigger or smaller areas - stop that. You`re creating a blurry mess. Just create a separate set of every breakpoint, If this is what you are doing.
Written by George
Related protips
1 Response
It depends actually on the case. Generally I agree to your statement. But sometimes percent might fit as well or even better because it can be used for better abstraction and therefore making code more maintainable. But again: it depends on the case.
Have a fresh tip? Share with Coderwall community!
