1
HTML/CSSAdvanced#css#performance
HTML/CSSAdvanced#css#design-systems
What is the difference between rem-based spacing scale and arbitrary pixel values in design systems?
A rem-based spacing scale (e.g., 4px increments as 0.25rem, 0.5rem, 1rem) creates visual consistency, scales with user font-size preferences for accessibility, and is easy to theme, whereas arbitrary pixel values lead to inconsistent, hard-to-maintain spacing across a codebase.
Example
:root {
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-4: 1rem;
}
.card { padding: var(--space-4); gap: var(--space-2); }