How to use CSS variables like a pro
How to use CSS variables like a pro 관련
CSS offers many predefined standard key-value-based properties for styling semantic HTML elements. However, while designing webpages, developers often need to repetitively use the same values for properties in several segments of stylesheets — for example, while using a primary accent color for various webpage elements.
CSS now supports using custom properties, also known as CSS variables, to avoid repetitive CSS property values. Like any popular programming language, CSS also implements variables for writing clean code with a productive assignment and retrieval syntax, scoping support, and fallback values.
In this tutorial, we’ll first demystify CSS variables and then build four simple projects that utilize them. Some basic CSS knowledge is required to follow along with this tutorial. Let’s dive in!
What are CSS variables?
CSS variables are user-defined values that can be reused throughout a stylesheet. They are also known as custom properties**.** The -- prefix and var() function is used to define and access CSS variables respectively:
:root {
--primary-color: #3498db;
}
button {
background-color: var(--primary-color);
}
Unlike traditional CSS properties, CSS variables can be modified dynamically with JavaScript using (element.style.setProperty). CSS variables can be changed in one place and all elements using it update automatically. They can be defined within selectors or globally using (:root ).
One of the most common use cases for CSS variables is managing websites in which numerous values are similar to those in the document. This helps to reduce the friction associated with refactoring or updating your code.
Editor’s note
This article was updated by Emmanuel John in March 2025 to include instructions on setting CSS variables dynamically with JavaScript, differentiate between CSS and SASS variables, and troubleshoot common developer issues with CSS variables.
What we’ll build in this tutorial
To solidify our knowledge about CSS variables, we’ll build four very simple projects:
- Button variations — This concept is popular in Bootstrap, where certain elements share CSS rules that give them a default design but are differentiated by colors or other properties
- Theme-based design — Specifically, a light-and-dark theme manipulated by JavaScript
- A responsive login form — We’ll display different layouts on desktop, tablet, and mobile screens
- JavaScript-free dynamic elements — This project generates a colorful native checkbox list
Each project should provide insights into how we can use CSS variables to take care of a wide vhow-to-declare-and-use-css-variables.mdariety of use cases.
Also referred to as custom properties or cascading variables, CSS variables have myriad use cases.
Conclusion
By building these simple projects, you can learn how to use CSS variables like a pro. You can use the style attribute to apply CSS variables directly to an HTML element like this <p style="color: var(--primary-color);">Hello, world!</p>. Also, you can debug CSS variable issues using the browser DevTools. There’s certainly more to them than I explained, so feel free to mess around with the code to explore further.
CSS variables help simplify the way you build websites and complex animations while still allowing you to write reusable and elegant code. Using CSS variables is also possible with React Native projects that run on the React Native Web renderer.
Frequently asked questions
How do I use variables in CSS?
You can use variables in your CSS using the var() function to apply declared variables in your styles.
When should I use CSS variables?
Use CSS variables when you need global or reusable values like colors, font sizes, spacings, or themes. They are also useful when you need to avoid hard-coded repetition. In large projects, changing a value like a primary color in multiple places can be tedious. Using CSS variables makes the codebase maintainable.
::: detaisl How do you initialize a variable in CSS?
CSS variables can be declared using either the -- prefix or the @property at-rule.
:::