CSS Variables (Custom Properties)

CSS Variables (also known as Custom Properties) are a way to store values that can be reused throughout CSS code. They allow you to create more flexible and maintainable styles.

What are CSS Variables?

CSS variables are custom properties that can be defined once and used multiple times. They work on the principle of inheritance and can be overridden in any element.

Syntax

/* Defining a variable */
:root {
  --primary-color: #3498db;
  --font-size: 16px;
  --spacing: 20px;
}

/* Using a variable */
.button {
  background-color: var(--primary-color);
  font-size: var(--font-size);
  padding: var(--spacing);
}

Advantages of CSS Variables

  1. Centralized management: All values are stored in one place (usually in :root), making it easier to change themes or styles.
  2. Dynamic changes: Variables can be changed via JavaScript, allowing you to create interactive themes.
  3. Inheritance: Variables inherit from parent elements, allowing you to create contextual styles.
  4. Fallback values: You can specify a fallback value if the variable is not defined.

Example with fallback

.button {
  background-color: var(--primary-color, #3498db);
  /* If --primary-color is not defined, #3498db is used */
}

Variable Scope

CSS variables have scope based on the cascade:

/* Global variables */
:root {
  --main-color: blue;
}

/* Variables for a specific component */
.card {
  --card-padding: 20px;
  padding: var(--card-padding);
}

/* Variables can be overridden */
.card.dark {
  --main-color: darkblue;
  background-color: var(--main-color);
}

Working with CSS Variables in JavaScript

CSS variables can be changed dynamically via JavaScript:

// Getting a variable value
const root = document.documentElement;
const primaryColor = getComputedStyle(root).getPropertyValue('--primary-color');

// Setting a variable value
root.style.setProperty('--primary-color', '#ff0000');

// Example: changing theme
function toggleTheme() {
  const root = document.documentElement;
  const currentTheme = root.style.getPropertyValue('--theme');
  
  if (currentTheme === 'dark') {
    root.style.setProperty('--bg-color', '#ffffff');
    root.style.setProperty('--text-color', '#000000');
    root.style.setProperty('--theme', 'light');
  } else {
    root.style.setProperty('--bg-color', '#1a1a1a');
    root.style.setProperty('--text-color', '#ffffff');
    root.style.setProperty('--theme', 'dark');
  }
}

Practical Example: Dark/Light Theme

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --primary-color: #3498db;
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
  --primary-color: #5dade2;
}

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

.button {
  background-color: var(--primary-color);
  color: var(--text-color);
}

<button onclick="toggleTheme()">Toggle theme</button>

function toggleTheme() {
  const html = document.documentElement;
  const currentTheme = html.getAttribute('data-theme');
  html.setAttribute('data-theme', currentTheme === 'dark' ? 'light' : 'dark');
}

Using calc() with Variables

CSS variables can be combined with the calc() function:

:root {
  --base-size: 16px;
  --spacing: 20px;
}

.container {
  font-size: var(--base-size);
  padding: calc(var(--spacing) * 2);
  margin: calc(var(--spacing) / 2);
}

Limitations

  1. No support in old browsers: IE11 does not support CSS variables.
  2. Cannot be used directly in media queries: Variables only work inside selectors.
  3. No type validation: CSS does not check that the variable value matches the expected type.

Tip:

Use CSS variables to create flexible themes, centralized style management, and dynamic appearance changes in your application. They are especially useful in modern frameworks and component libraries.