CSS Custom Properties (Variables)
CSS Custom Properties (Variables) — Master CSS custom properties — declaration, scoping, inheritance, dynamic theming, and practical patterns. The guide walks through Declaring & Using Variables, Theming with Variables, Dynamic Variables with JavaScript, Variable Scope & Inheritance. Declare with --prefix: --main-color: #3498db. Access with var(): color: var(--main-color). Fallback value: var(--main-color, #000). Variables inherit through the cascade — setting on a parent affects all children. Use :root for global variables. Can be any CSS value type: colors, lengths, numbers, strings, even multiple values for shorthand properties. Create dark/light themes by changing variable values: [data-theme="dark"] { --bg: #1a1a2e; --text: #e0e0e0 }. Toggle with JavaScript: document.documentElement.dataset.theme = "dark". Media query prefers-color-scheme: @media (prefers-color-scheme: dark) { :root { --bg: #111; } }. Combine with system preference + manual override for best UX. The guide is organized into 4 sections that build on each other, each pairing a prose explanation with real CSS you can use as-is.