相対値
echo.cssは、先述の「レスポンシブ優先設計」を維持するため、CSSのサイズに関する単位を文字サイズ、もしくはオブジェクトサイズによる相対値で統一しています。
単位なし
line-height プロパティのみに使用しています。
rem
容易に大きさを変更してはならない要素に対して、pxの代替として使用しています。 1rem = 16px で算出しています。
- ブレークポイント
- 幅可変オブジェクト（
.echo-container等）の最大幅 - デザインを緻密に検討することが多いオブジェクト（
.echo-button, .echo-card, .echo-hero等） - ボーダーの幅
- グリッド余白
- 表のセルの左右余白
- 各コンポーネントの基準となる文字サイズ
- 余白を変更するユーティリティクラス
em
親要素から継承したフォントサイズに追随しなければ不都合がある場合に使用しています。具体的には以下のいずれかです。
- 余白が大きすぎる、小さすぎる等、デザインに不整合が出る場合
- 打ち消しのためのCSSが大量に必要となり、コードが冗長になる場合
- ラベル、見出しの文字サイズや余白
- 表のセルの上下余白
- アイコン、シェブロン（>）の大きさ
- 各コンポーネント内の要素の文字サイズ
- 文字サイズを変更するユーティリティクラス
パーセント
親要素のサイズが大幅に変動する場合に使用しています。
- グリッドの幅
- 巨大なコンポーネント内のコンテンツ（
.echo-hero等）
clamp関数
clamp関数とは、モダンブラウザで使用できる、最小値・最大値を定義できるCSS関数です。変動が極端に大きく、相対値だけでは不適切な値になってしまう可能性がある場合に、まれに使用しています。
Internet Explorerは非対応となるため、代替値を指定しています。
- 画像と文章の間の余白（
.echo-media） - 余白を変更するユーティリティクラス（
.echo-margin-***, .echo-padding-***）
補足
echo.cssでは、デザイナーとの共有が困難になるため、複雑な計算をできるだけ行わないようにしています。
ですが、 .echo-margin-***, .echo-padding-*** のみ、変化が滑らかになるよう、１次関数を使用しています。
下記コンテンツを参考にさせていただきました。
レスポンシブな空白のつくり方 | clamp()とvwを利用した伸び縮みする空白 | CodeGrid (Japanese, Paid contents)