CSSカスタムプロパティの設定命名方法

CSS上で変数として利用できるカスタムプロパティの命名をどうしようか毎回悩むので、下記を備忘として命名を保存。

サイズ

サイズの命名は下記を小さい順として利用

micro
tiny
mini
small
midium
big
large
huge
gitantic
immense
colossal

横幅いっぱいに使う場合

:root{
    --size-micro:clamp(.3rem, .6vw, .5rem);
    --size-tiny:clamp(.5rem, .8vw, 1.0rem);
    --size-mini:clamp(1.0rem, 1vw, 1.6rem);
    --size-small:clamp(1.2rem, 1.1vw, 2.0rem);
    --size-midium:clamp(1.4rem, 1.2vw, 2.4rem);
    --size-big:clamp(1.6rem, 1.3vw, 3rem);
    --size-large:clamp(2.0rem, 2.6vw, 9rem);
    --size-huge:clamp(2.4rem, 4vw, 9rem);
    --size-giantic:clamp(2.6rem, 4vw, 9rem);
    --size-immense:clamp(3rem, 8vw, 12rem);
    --size-colossal:clamp(4rem, 12vw, 16rem);
}

wordpressのtheme.jsonのカスタムサイズ設定

wordpressのtheme.jsonに記載するスペース、フォントサイズ設定を下記に記載。

–wp–custom–{spacing}–{small}などで出力されます。

"custom": {
    "spacing": {
        "small": "var(--size-small)",
        "medium": "var(--size-midium)",
        "large": "var(--size-large)",
        "outer": "var(--size-large)"
    },
    "typography": {
        "font-size": {
            "huge": "var(--size-huge)",
            "gigantic": "var(--size-gigantic)",
            "colossal": "var(--size-colossal)"
        }
    }