Understanding and Using CSS Variables

By Hesham Hassan

Introduction

CSS variables, also known as CSS custom properties, are a powerful tool for web developers. Unlike SASS/LESS variables, which are static, CSS variables are dynamic and can be manipulated using JavaScript. This flexibility makes them an essential feature for modern web development.

What are CSS Variables?

CSS variables, or CSS custom properties, allow you to store values that you can reuse throughout your CSS. This can greatly simplify your stylesheet and make it more maintainable. The syntax for declaring a CSS variable is straightforward:

:root {
  --main-bg-color: #fff;
  --main-text-color: #000;
}

Here, :root is a pseudo-class selector that matches the document’s root element, making the variables available globally.

Using CSS Variables

You can use CSS variables in your styles by referencing them with the var() function. For example:

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

This method allows for easy theming and adjustments across an entire website by simply changing the variable values.

Local Scope

CSS variables can also be defined in a local scope, meaning within a specific element or class:

.container {
  --container-bg-color: #f3f3f3;
}

Then use it within the same scope:

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

Declaration Syntax

When declaring CSS variables, it’s important to follow the correct syntax. Here are some key points:

Variable names are case-sensitive (--myColor is different from --mycolor).
Always start with two dashes (--).

Dynamic Nature of CSS Variables

One of the most significant advantages of CSS variables is their dynamic nature. Unlike SASS/LESS variables, which are preprocessed and fixed, CSS variables are live and can be updated at runtime using JavaScript:

document.documentElement.style.setProperty("--main-bg-color", "#333");

This capability allows for real-time theme switching, user-specific customization, and more.

Inheritance

CSS variables can be inherited, making it easier to manage styles for nested elements. For example:

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

body {
  font-size: var(--main-font-size);
}

h1 {
  font-size: calc(var(--main-font-size) * 2);
}

Applications and Examples

Typesetting with CSS Variables

CSS variables can greatly enhance typesetting by allowing you to define and adjust font sizes, colors, and other properties centrally. For a live demo, check out this CodePen example:

Theming

Theming is one of the most popular uses for CSS variables. By defining theme variables, you can switch themes effortlessly:

:root {
  --main-bg-color: #fff;
  --main-text-color: #000;
}

[data-theme="dark"] {
  --main-bg-color: #333;
  --main-text-color: #fff;
}

document.documentElement.setAttribute("data-theme", "dark");

For a practical example, visit this CodePen demo:

Using CSS Variables in JavaScript

Integrating CSS variables with JavaScript opens up a world of possibilities. Here are two demos that illustrate the difference between using variables and not using them:

Browser Support

CSS variables are well-supported across all modern browsers. However, for older browsers, it’s essential to provide fallbacks:

body {
  background-color: #fff; /* Fallback */
  background-color: var(--main-bg-color);
}

Fallbacks and Polyfills

In cases where CSS variable support is limited, you can use PostCSS plugins to add support:

npm install postcss postcss-custom-properties

Conclusion

CSS variables provide a versatile and dynamic way to handle styles in modern web development. They offer advantages over traditional preprocessor variables by allowing runtime updates and easy theming. As browser support continues to grow, the adoption and usage of CSS variables are likely to become even more widespread.

For more information and practical examples, explore the demos provided or dive into the documentation on MDN Web Docs.

Thank you for reading! If you have any questions or need further assistance, feel free to reach out.