Custom Properties and Functions

Custom properties store values in the cascade. Unlike preprocessor variables, they can inherit, respond to media queries, and change at runtime.

Define tokens by role

01:root {
02  --color-ink: #211a25;
03  --color-accent: #4c1c62;
04  --space-page: clamp(1rem, 4vw, 3rem);
05}
06.page { padding-inline: var(--space-page); color: var(--color-ink); }

A fallback protects optional values: color: var(--course-color, var(--color-accent)).

Calculate within safe limits

01.shell { width: min(72rem, 100% - 2rem); }
02.sidebar { width: clamp(14rem, 22vw, 19rem); }
03.content { min-height: calc(100vh - var(--header-height)); }

min() chooses the smallest candidate, max() the largest, and clamp() constrains a preferred value between bounds.

Keep this

Name tokens by purpose, use the cascade to scope them, and use math functions to replace unnecessary breakpoints.