font-sizeに応じて大きさの変わるコンポーネントを作る話

概要

昨今のフロントエンド開発では、コンポーネントを作成し組み立てていくことが多い。
その中で、汎用コンポーネントの内部の位置調整を px で指定してしまうと、別の場所で別のフォントサイズで使いたくなったときに見た目にずれが生じてしまう。
その対策方法。

方針

ただ em を使う。

解説

SampleComponent.html

<div class="sample">
    <p class="sample__text">猫</p>
    <svg
        xmlns="http://www.w3.org/2000/svg"
        class="sample__icon"
        viewBox="0 0 15 15"
    >
        <!-- 略 -->
    </svg>
</div>

SampleComponent.scss

@function toEm($value) {
    // font-size: 14px; を基準に px を em に変換する
    @return $value / 14 * 1em;
}

.sample {
    display: inline-flex;
    align-items: center;
    padding: toEm(8);

    &__text {
        margin-right: toEm(4);
        font-weight: bold;
    }

    &__icon {
        width: toEm(15);
        height: toEm(15);
    }
}
</style>

こんな感じ。

これでこのコンポーネントのフォントサイズが変わると、コンポーネント内部の文字列だけでなく、アイコンサイズ、 padding や margin も同じ比率で増減する。