CSS Custom Properties (Variables)
CSS custom properties (variables) let you define reusable values - colors, spacing, fonts - and change them in one place to update your entire design. They are the foundation of modern CSS theming and design systems.
CSS Variables Basics
- --variable-name: value - Define a variable with double-dash prefix. Convention: kebab-case names
- var(--variable-name) - Use the variable: color: var(--primary-color)
- var(--name, fallback) - Provide a fallback value: color: var(--accent, #E44D26)
- :root { } - Define global variables on :root (the html element). Available everywhere in the page
- Scoped variables - Define on any element: .card { --card-padding: 24px; } Only available inside .card and children
- Inheritance - Variables inherit down the DOM tree. Child elements can access parent's variables
- Override in scope - Redefine a variable on a child to override just that subtree: .dark { --bg: #1a1a2e; }
CSS Variables Code
/* Define variables on :root (global) */
:root {
/* Colors */
--primary: #667eea;
--primary-dark: #5a6fd6;
--accent: #E44D26;
--text: #333;
--text-light: #666;
--bg: #ffffff;
--bg-secondary: #f0f4f8;
--border: #e0e0e0;
/* Spacing */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 48px;
/* Typography */
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* Borders */
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
}
/* Use variables everywhere */
body {
font-family: var(--font-sans);
color: var(--text);
background: var(--bg);
}
.card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-lg);
}
.btn-primary {
background: var(--primary);
border-radius: var(--radius-sm);
padding: var(--space-sm) var(--space-md);
}
.btn-primary:hover {
background: var(--primary-dark);
}Tip
Define ALL colors, spacing, and typography as CSS variables in :root from day one. Even for small projects. When the client says 'change the primary color', you update ONE line instead of find-and-replacing across the codebase.
CSS variables enable theming and dark mode without preprocessors
Common Mistake
Using CSS variables without fallbacks in critical styles. var(--primary) with no fallback renders nothing if the variable is undefined. Use var(--primary, #667eea) to guarantee a visible result even if the variable isn't set.
Practice Task
Create a design token system: (1) Define --primary, --bg, --text, --radius, --shadow in :root, (2) Build a card and button using only variables, (3) Override variables inside .dark class to test instant theme switching.
Quick Quiz
Key Takeaways
- CSS custom properties (variables) let you define reusable values - colors, spacing, fonts - and change them in one place to update your entire design.
- -variable-name: value - Define a variable with double-dash prefix. Convention: kebab-case names
- var(--variable-name) - Use the variable: color: var(--primary-color)
- var(--name, fallback) - Provide a fallback value: color: var(--accent, #E44D26)