画像置換には疑似要素を使う派ですこんにちは。font: 0/0 aを使う画像置換はあんまり使いたくないというか、em単位をその要素で使えなくなるのはかなり致命的な気がする。こういうテクニックは他のプロパティーに影響を与えないということが最も重要だと思う。
疑似要素を使う方法には、contentプロパティーで直接画像を指定する方法と、background-imageプロパティーで画像を指定する方法がある。SVGだとリサイズがうまくいかなかったり位置がずれることがあるので後者の方が良い感じ。スプライトを使う場合にもその仕組上後者を使う。それじゃcontentプロパティーを使う方法いつ使うの……みたいな感じだけど、こっちを使うとCSSが有効だけど画像が無効というシナリオに対応できるので、スプライトではないPNGやJPEGならこっちを使うと良い。
SCSS Partialsに三種類だけ画像置換のミックスインを追加しておいた。