CSSでは単位が色々使えるようになった(なっている)。そのため、ちょくちょく「○○には✕✕単位を使うべき」という記事をよく見るようにもなった。僕は単位は管理の都合で決定し、統一した方が無難だと考えている。
それぞれの単位には疑うことなく向き・不向きがある。しかし向き・不向きを考慮して使い分けをすると、同じサイズを違う単位で表現することになる。とある要素で0.8emと2rem、20pxが同じサイズになる、と考えながらCSSコードを読んでいくのは苦痛だろう。
利用する単位の決定はプロジェクトの種類によって都合の良し悪しがある。ウェブサイトの構成パーツに画像や動画が多い場合、ピクセル・ベースでプロトタイプを考えた方が効率的だ。現状では低コストにアスペクト比を維持したまま適当にリサイズしてもらうことが難しいからだ。となるとpx単位へ統一していった方が紛れがないだろう。逆に文章のコンテンツありきであるならば、文字サイズを中心にレイアウトを作り上げた方がうまくいく。その場合はrem単位が機能しやすいはずだ。
単位の統一はサイズの一元管理(システム化)でもメリットは大きい。一元管理する場合、それぞれのサイズがどのような大きさなのか、CSSコード全体やHTMLを使ったプレビューとは別に把握できなければならない。そのような時に単位がバラバラだと混乱してしまう。
適宜単位を使い分けるというのは、CSSにおいては効率的ではあるだろう。もしかしたらCSSの適用においてもそうかもしれない。しかしその効率化はCSSコードの明快さやプロトタイプとの互換性を犠牲にしてしまう。
近い将来、そういった単位をもつ値はカスタム・プロパティー化が進む(はずだ)。そうなると計算とルールセット内での上書きにより、単位の使い分けに相当するものをブラウザー側に任せられる。この点でも統一にはうまみがあるはずだ。
その一方でユーザーの環境や設定に強く依存するexやvw、来るcap単位などのことは考えなければならない。これらの単位は主にスタイルを適用する要素のコンテキストに従って利用すると、CSSコードが大幅に簡略化できたり、スタイル都合による要素の追加を避けられる。そのため大いに活用されるべきものだ。
こういった単位は他で再利用することはまずないだろう。そう考えると、個々のルールセットではこれらの単位とカスタム・プロパティーの参照しか出てこないようなCSSコードが良さそうだ。