Exploring the Depths of CSS Custom Properties

Published on: by Dr. Talib

CSS Custom Properties, often called CSS variables, are a powerful feature that allows you to define reusable values directly in your CSS. This brings programmability to styling, making your stylesheets more dynamic, maintainable, and easier to theme.

What are CSS Custom Properties?

At their simplest, CSS custom properties are entities defined by authors that contain specific values to be reused throughout a document. They are declared with a `--` prefix and can be accessed using the `var()` function.

/* Defining custom properties */
:root {
  --primary-color: #4f46e5;
  --secondary-color: #c778dd;
  --spacing-unit: 1rem;
}

/* Using custom properties */
.button {
  background-color: var(--primary-color);
  padding: var(--spacing-unit);
  color: white;
}

.heading {
  color: var(--secondary-color);
  margin-bottom: var(--spacing-unit);
}

The `:root` pseudo-class is typically used to declare global custom properties, making them available throughout the entire document. However, custom properties can be defined on any element, allowing for scoped variables.

Benefits of Using CSS Custom Properties

  • Maintainability: Change a value in one place, and it updates everywhere it's used.
  • Theming: Easily switch themes (e.g., light/dark mode) by changing a few variable values at a higher scope.
  • Readability: Give meaningful names to values (e.g., `--brand-primary` instead of `#4f46e5`).
  • Dynamic Capabilities: Manipulate CSS properties with JavaScript (e.g., `element.style.setProperty('--my-variable', 'new-value');`).
  • Consistency: Enforce design system values across your project.

Dynamic Theming Example

One of the most compelling use cases for CSS custom properties is dynamic theming. By defining theme-related colors as variables, you can easily switch themes by changing the values of these variables, often by adding a class to the `body` or `html` element.

/* Default Light Theme */
:root {
  --bg-color: #f0f0f0;
  --text-color: #333;
  --accent-color: #007bff;
}

/* Dark Theme */
body.dark-theme {
  --bg-color: #333;
  --text-color: #f0f0f0;
  --accent-color: #ff9900;
}

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

a {
  color: var(--accent-color);
}

<body class="dark-theme">
  <h1>Hello World</h1>
  <p>This is a paragraph with a <a href="#">link</a>.</p>
  <button onclick="document.body.classList.toggle('dark-theme')">Toggle Theme</button>
</body>

Working with JavaScript

Custom properties are not just for CSS; they can be read and manipulated using JavaScript. This opens up possibilities for creating highly interactive and dynamic user interfaces.

const element = document.getElementById('myElement');

// Get the computed value of a custom property
const primaryColor = getComputedStyle(element).getPropertyValue('--primary-color');
console.log(primaryColor); // Outputs: #4f46e5

// Set a new value for a custom property
element.style.setProperty('--primary-color', 'red');

Browser Support and Fallbacks

CSS Custom Properties are widely supported across modern browsers. For older browsers that don't support them, CSS cascading will naturally provide a fallback if you define a regular CSS property before its variable counterpart.

.element {
  color: black; /* Fallback for older browsers */
  color: var(--dynamic-color, blue); /* If --dynamic-color is not defined, use blue */
}

In the example above, if `--dynamic-color` is not defined, `color` will be `blue`. If `var()` is not supported at all, `color` will be `black`.

Conclusion

CSS Custom Properties are a game-changer for writing efficient, flexible, and maintainable CSS. They allow developers to create truly dynamic styles, simplify theming, and build more robust design systems. If you haven't integrated them into your workflow yet, now is the time to start exploring their full potential!