HTML & CSS Interview Question #107

What are CSS custom properties?

Responsive Design, Modern CSS, Variables, Transitions & Animations Senior Advanced

Quick Interview Answer

CSS custom properties, often called CSS variables, are author-defined properties whose names begin with --. Their values participate in the cascade and can be referenced with the var() function.

Detailed Explanation

CSS custom properties, often called CSS variables, are author-defined properties whose names begin with --. Their values participate in the cascade and can be referenced with the var() function.

They are useful for design tokens, themes, component configuration, spacing, colors, and values that should be changed at runtime or inherited through the document. Unlike preprocessor variables, they exist in the browser's CSS value system.

Code Example

:root {
    --brand-color: #2563eb;
    --space-md: 1rem;
}

.button {
    background: var(--brand-color);
    padding: var(--space-md);
}