rem単位を使うようにした。随分前からちょくちょくやってたのの蔵出し。統一するだけならさほど面倒くさくなく、px単位と同じように扱え、em単位では必要な割り算がなくなって随分楽になる。
どれにどう使うかを見極めるためにまず全部rem単位にした。まだ確定ではないけど、そこそこ規模があるremで統一したCSSを初見した感じでは以下のような印象を持った。
高さや縦方向の余白はem単位
高さはブラウザーにおいて無限に使用可能なので、あまりrem単位を使って固定気味にする意味はないと思う。縦方向のリズムを刻みたい場合にもem単位より計算量が少なくなるので向いている。
幅は%かem単位
幅については%でカラムを作り、補助的なものはem単位でそのコンテキストの文字サイズに合わせてやる方が安定する。そうでないとpx単位の代わりにrem単位を使ってるだけみたいな感じになるので、文字サイズというものをユーザーがコントロールすることが少ない現在では、あんまりrem単位を導入する意味は無いかもしれない。カラム幅には%の代わりに将来的にはvw単位をうまく使っていきたい気がする。
文字サイズと横方向の余白はrem単位
文字サイズに関しては継承を無視したいであろうと思われるので、rem単位がベストなのは様々な人が言っている通り。横方向の余白は難しいところだけど、余白を調節する基準はビューポートであってそのコンテキストの文字サイズではないので、em単位より向いている。ただ幅でem単位を使うならそれに合わせた方が書きやすく・読みやすくなるので悩ましい。
あんまりちゃんと確認していないし、そもそもまだフォールバックを書いてない(ポストプロセッサー作る予定だった)。もし変な所を見つけてCtrl+F5しても直らなかったら、それとなく教えてくれるとうれしい。