CSS Variables

Custom properties, theming, dynamic values, and best practices.

Overview

CSS variables enable dynamic, reusable styles.

Key Concepts

• Declaration -- Custom property syntax
• Scope — Global vs local variables
• Fallbacks — Default values
• Dynamic Updates — JavaScript modification
• Theming — Dark/light mode

Code Examples

/* Global variables */
:root {
  --color-primary: #007bff;
  --color-secondary: #6c757d;
  --color-success: #28a745;
  --color-danger: #dc3545;
  
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  
  --font-sans: system-ui, -apple-system, sans-serif;
  --font-mono: 'Monaco', 'Consolas', monospace;
  
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
}

/* Local variables */
.card {
  --card-bg: white;
  --card-padding: var(--spacing-lg);
  
  background: var(--card-bg);
  padding: var(--card-padding);
  box-shadow: var(--shadow-md);
}

/* Fallbacks */
.element {
  color: var(--undefined-color, #333);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1a1a1a;
    --color-text: #ffffff;
  }
}

/* JavaScript updates */
document.documentElement.style.setProperty('--primary', '#ff0000');

/* Dynamic theming */
[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
}

[data-theme="light"] {
  --bg-color: #ffffff;
  --text-color: #1a1a1a;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
  transition: background var(--transition-normal), color var(--transition-normal);
}

/* Component variants */
.button {
  --btn-bg: var(--color-primary);
  --btn-color: white;
  
  background: var(--btn-bg);
  color: var(--btn-color);
}

.button-secondary {
  --btn-bg: var(--color-secondary);
}

.button-danger {
  --btn-bg: var(--color-danger);
}

/* Responsive values */
.responsive-padding {
  padding: clamp(var(--spacing-sm), 2vw, var(--spacing-xl));
}

Practice

Build a theme switcher using CSS variables and JavaScript.