CSS Custom Properties

CSS Custom Properties (CSS Variables) enable dynamic, cascade-aware values in CSS. Unlike preprocessor variables, they’re live and can change at runtime.

Syntax:

:root { --variable-name: value; }
.element { property: var(--variable-name, fallback); }

First Principle: Custom properties follow CSS cascade and inheritance rules. They’re not text replacement but actual CSS values.

Key Capabilities:

• Cascade: Child elements inherit parent custom properties
• Runtime modification: JavaScript can change values via setProperty()
• Conditional logic: Different values in different contexts
• Fallback values: Graceful degradation built-in

Mental Model: Think of them as CSS’s native dependency injection system.

Common Pattern: Theme switching via root-level property changes.

Related: CSS Design Tokens