CSS variables: Flexible styling for your components 🎨

CSS has evolved mightily in recent years. In the past, stylesheets were often an endless copy and paste of the same colors, font sizes or spacing. This made maintaining huge projects a nightmare. But since CSS custom properties - better known as CSS variables - have become available, this chaos is history.

With CSS variables, you can not only make your code more structured and maintainable, but also style complex components dynamically and flexibly without having to constantly change classes or selectors. In this article, I'll show you step by step how to use CSS variables, what advantages they have and how you can even use them in scoped components.

What are CSS variables? 🤔

CSS variables are named values that you can define within your stylesheets. Unlike preprocessor-based variables (such as SASS or LESS), CSS variables are available at runtime and respond to the context in which they are used.

A CSS variable is always defined with two hyphens:

:root {
  --primary-color: #3498db;
  --spacing: 16px;
}

You can then call the variable anywhere in the CSS with var():

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

Important: CSS variables are part of the DOM and can even be changed via JavaScript at runtime.

The benefits of CSS variables 🚀

Why should you use CSS variables? Here are the most important reasons:

• Reusability: Colors, sizes and spacing don't have to appear multiple times in the CSS.
• Easier maintenance: Changes to a central variable affect all elements.
• Dynamics: You can adjust variables in JavaScript at runtime.
• Scoping: Variables can be defined globally or locally within a selector.
• Better performance: Unlike with SASS, you don't have to recompile every time you make a change.

How to use CSS variables in the project ✏️

The easiest way is to define your variables in the global context:

:root {
  --font-size: 18px;
  --border-radius: 8px;
}

Then use it in any elements:

.card {
  font-size: var(--font-size);
  border-radius: var(--border-radius);
}

If you want to access it dynamically in JavaScript, it works like this:

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

Scoped variables: Overwrite variables locally 🪄

The real gamechanger is the ability to overwrite variables within components. You can define a global variable and reset it within an element or component:

:root {
  --button-bg: #3498db;
}

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

.button.secondary {
  --button-bg: #2ecc71;
}

This automatically turns the .button.secondary class green without you having to change the background color manually.

Dynamically style components with CSS variables 🧩

CSS variables offer enormous flexibility, especially for reusable components such as buttons, cards or modals. You can set your own variables for each component, which change depending on the context:

.card {
  --card-padding: 20px;
  padding: var(--card-padding);
}

.card.small {
  --card-padding: 10px;
}

This even works nested:

.theme-dark {
  --background: #222;
  --text-color: #eee;
}

.theme-light {
  --background: #fff;
  --text-color: #000;
}

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

This allows you to easily implement themes or mode changes, for example, without changing a single class in your HTML.

Fallbacks and special features 🧩

You can also add a fallback to variables:

.title {
  color: var(--title-color, #333);
}

If --title-color is not defined, #333 is used. Practical for older browsers or if you deliberately want to allow optional values.

Attention: CSS variables do not work in Internet Explorer. However, all modern browsers support them (see Can I use).

Why not just SASS or LESS? 🤨

In the past, you may have written variables with SASS or LESS. The problem: these variables only exist at compile time. They no longer exist in your final CSS - so you can't change or overwrite them at runtime.

With CSS variables, however, you can:

• Build dynamic themes
• Adjust elements live based on user interaction
• Make styling context-dependent (e.g. different colours in a modal). e.g. different colors in a modal)

Practical example: Color themes via CSS variable 🧩

A simple dark/light mode example:

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

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

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

You can switch the mode with JavaScript:

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

Without having to change a line of additional CSS. This used to be impossible with SASS.

Conclusion 🎯

CSS variables are one of the most underrated features in modern stylesheets. They not only bring structure and readability to your CSS, but also enable flexible components, dynamic themes and centralized control of your styles. Especially for larger projects, you save a lot of time in the long term and avoid unnecessary code duplication.

If you haven't used CSS variables before - give them a try! You'll wonder why you've done without them for so long.

Have you already used CSS variables in your project or are you planning to do so now? Feel free to write me in the comments how you want to use them or where you still have questions!