CSS Custom Properties—often known as CSS variables—have revolutionized how developers manage styles by introducing dynamic, reusable values directly within their stylesheets. They allow you to define variables in CSS that can be reused throughout your code, making your styles easier to maintain, more consistent, and adaptable to change.

1. What Are CSS Custom Properties?

CSS Custom Properties are variables that you define in your CSS. They follow a specific syntax, where custom properties are prefixed with two dashes (--) and are accessed using the var() function.

Syntax Example:

:root {

--primary-color: #3498db;

--secondary-color: #2ecc71;

--font-size: 16px;

}

body {

color: var(--primary-color);

font-size: var(--font-size);

}

Scope: CSS variables are scoped. When defined on the :root pseudo-class, they become globally available throughout the document. You can also define them on a specific selector to limit their scope.
Dynamic Updates: Unlike preprocessor variables (SASS, LESS), CSS Custom Properties are live and can be updated at runtime using JavaScript, which is great for theming and dynamic designs.

2. Benefits of Using CSS Custom Properties

Reusability: Define a value once and reuse it across multiple CSS rules.
Maintainability: Centralized values make it easy to update styles globally.
Dynamic Theme: You can change a variable's value with JavaScript, allowing for dynamic themes and user-driven customization.
Cascading and Inheritance: Custom properties obey the cascade and can be inherited, which makes them flexible when dealing with nested components.

3. How to Use CSS Custom Properties

Defining Variables

Typically, you define CSS custom properties on the :root selector to ensure they’re available globally:

:root {

--main-bg-color: #f4f4f4;

--main-text-color: #333;

--header-height: 60px;

}

Using Variables with `var()`

To use these variables, simply call them with the var() function:

body {

background-color: var(--main-bg-color);

color: var(--main-text-color);

}

header {

height: var(--header-height);

}

Providing Fallback Values

The var() function allows you to specify a fallback value if the custom property is not defined:

p {

font-size: var(--paragraph-font-size, 1rem);

}

In this example, if --paragraph-font-size is not set, the paragraph will default to 1rem.

4. Practical Examples

Example 1: Simple Theming

Let’s create a simple theme that uses custom properties. In this example, we'll define light and dark themes that can be toggled with JavaScript.

HTML:

<!DOCTYPE html>

<head>

<title>CSS Custom Properties Theme</title>

</head>

<body>

<h1>My Themed Website</h1>

<button id="toggleTheme">Toggle Theme</button>

</header>

<main>

<p>Welcome to my website. Enjoy the dynamic theme!</p>

</main>

</body>

</html>

CSS (styles.css):

:root {

--bg-color: #ffffff;

--text-color: #333333;

--header-bg: #3498db;

--button-bg: #2ecc71;

}

body {

background-color: var(--bg-color);

color: var(--text-color);

margin: 0;

font-family: Arial, sans-serif;

}

header {

background-color: var(--header-bg);

padding: 1rem;

display: flex;

justify-content: space-between;

align-items: center;

}

button {

background-color: var(--button-bg);

color: #fff;

border: none;

padding: 0.5rem 1rem;

cursor: pointer;

}

JavaScript (script.js):

const toggleThemeBtn = document.getElementById('toggleTheme');

toggleThemeBtn.addEventListener('click', () => {

const rootStyles = document.documentElement.style;

// Toggle between light and dark themes

if (getComputedStyle(document.documentElement).getPropertyValue('--bg-color').trim() === '#ffffff') {

rootStyles.setProperty('--bg-color', '#333333');

rootStyles.setProperty('--text-color', '#ffffff');

rootStyles.setProperty('--header-bg', '#444444');

rootStyles.setProperty('--button-bg', '#888888');

} else {

rootStyles.setProperty('--bg-color', '#ffffff');

rootStyles.setProperty('--text-color', '#333333');

rootStyles.setProperty('--header-bg', '#3498db');

rootStyles.setProperty('--button-bg', '#2ecc71');

}

});

Explanation:

The CSS defines several custom properties for colors and dimensions.
The JavaScript toggles these properties, dynamically switching between a light theme and a dark theme.
This approach makes theming straightforward and maintainable.

Example 2: Responsive Design with Variables

CSS custom properties can also be used to create responsive designs by adjusting values based on media queries:

:root {

--font-size: 16px;

}

body {

font-size: var(--font-size);

}

@media (min-width: 768px) {

:root {

--font-size: 18px;

}

}

@media (min-width: 1024px) {

:root {

--font-size: 20px;

}

}

Here, the base font size increases on larger screens, ensuring your typography scales nicely with the viewport.

5. Conclusion

CSS Custom Properties offer a powerful way to manage your styles dynamically. They allow for reusable, maintainable, and scalable design systems that adapt to changes easily, whether you’re building a themable website or a responsive layout.

By leveraging custom properties:

You can centralize design values for easy updates.
You can implement dynamic theming with minimal JavaScript.
You can create responsive designs that adjust based on media queries.

Experiment with CSS custom properties in your projects to see how they can simplify your CSS and enhance your workflow.