CSS Variables (Custom Properties)

CSS variables, also known as custom properties, are a powerful feature introduced in CSS3. They allow developers to define reusable values in stylesheets and reference these values using variable names. This approach not only enhances code maintainability but also makes dynamic style adjustments more flexible.

Basic Syntax of CSS Variables

CSS variables start with two hyphens (--), followed by the variable name. When defining variables, they are typically placed in the :root pseudo-class to make them global. For example:

:root {
  --primary-color: #3498db;
  --padding-large: 20px;
}

To use them, reference the variables via the var() function:

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

Variable names are case-sensitive; --color and --Color are two different variables. If a variable is undefined, a fallback value can be provided:

.element {
  color: var(--undefined-color, black);
}

Scope of CSS Variables

CSS variables follow cascading rules, with scopes divided into global and local. Global variables are usually defined in :root, while local variables can be defined in any selector:

.container {
  --local-bg: #f1c40f;
  background-color: var(--local-bg);
}

Child elements inherit variable values from their parent, but variables with the same name will override the parent's definition:

.parent {
  --text-color: red;
}
.child {
  --text-color: blue; /* Overrides the parent's --text-color */
}

Dynamic Nature of CSS Variables

CSS variables can be dynamically modified at runtime using JavaScript, making tasks like theme switching or responsive design easier:

document.documentElement.style.setProperty('--primary-color', '#e74c3c');

Variables can also be redefined in media queries for responsive layouts:

:root {
  --font-size: 16px;
}

@media (max-width: 768px) {
  :root {
    --font-size: 14px;
  }
}

Practical Applications of CSS Variables

Theme Switching

Modifying variable values to switch themes is a classic use case for CSS variables:

:root {
  --bg-color: white;
  --text-color: black;
}

.dark-theme {
  --bg-color: #333;
  --text-color: white;
}

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

Building a Spacing System

Manage spacing variables uniformly to ensure design consistency:

:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
}

.card {
  margin-bottom: var(--space-md);
  padding: var(--space-sm);
}

Animations and Transitions

CSS variables make animation parameters easier to adjust:

:root {
  --rotate-degree: 0deg;
}

.spinner {
  transform: rotate(var(--rotate-degree));
  transition: transform 0.5s;
}

.spinner:hover {
  --rotate-degree: 360deg;
}

Advanced Techniques for CSS Variables

Calculations and Unit Conversions

CSS variables can be combined with calc():

:root {
  --base-size: 16;
}

.text {
  font-size: calc(var(--base-size) * 1px);
}

Chaining Variable References

Variables can reference other variables:

:root {
  --primary: #3498db;
  --button-bg: var(--primary);
}

Using Variables in Pseudo-elements

Pseudo-elements can also access variables:

.tooltip::after {
  content: var(--tooltip-text);
  background-color: var(--tooltip-bg);
}

Browser Support and Fallback Solutions for CSS Variables

Modern browsers widely support CSS variables, but for older browsers, fallback solutions can be provided:

.title {
  color: #2c3e50; /* Fallback value */
  color: var(--title-color);
}

Use @supports to detect support:

@supports (--css: variables) {
  /* Styles for browsers supporting CSS variables */
}

Performance Considerations for CSS Variables

CSS variables perform well, but excessive use may increase style calculation complexity. Avoid frequently modifying variables in animations, especially on low-performance devices.