What are CSS variables?
CSS Variables (also known as CSS custom properties) are values that can be stored in a stylesheet and reused throughout the document. They allow you to dynamically change values in CSS, making it easier to maintain and reuse styles. CSS Variables are declared with a — prefix, followed by a name and value, and can be accessed using the var() function. For example to create a CSS variable you can use the following syntax in your css :root attribute as follows:
:root {
--main-color: blue;
}Then when you need to use the variable you can address it using the “var” function as follows:
.header {
background-color: var(--main-color);
}This will now set the .header class to the — main-color variable which in this example is blue.
Can I access Variables in JavaScript?
The following examples shows how to access and modify the css variable thus providing access and mutation in JavaScript:
// Access
getComputedStyle(document.documentElement).getPropertyValue('--main-color'); // blue
// Mutate
document.documentElement.style.setProperty('--main-color', 'pink');Why should I use CSS variables?
There are several reasons why you might choose to use CSS Variables.
Reusability: CSS Variables allow you to store values in one place, and then reuse them throughout your stylesheet. This makes it easier to maintain your styles and update them consistently.
Dynamic styling: With CSS Variables, you can change values dynamically, which allows you to create more flexible and interactive styles. For example, you can use JavaScript to change the value of a CSS Variable based on user interaction, or responsive design.
Better organization: By using CSS Variables, you can keep your styles organized and make your code easier to understand. For example, instead of hard-coding values in multiple places, you can store them in a single location, making it easier to see the relationships between values and making changes more efficient.
Improved performance: Using CSS Variables can also improve the performance of your stylesheet. Since variables are resolved only once, they are faster than traditional CSS selectors, which are resolved each time they are used.
Summary
CSS Variables can improve the maintainability, readability, and performance of your stylesheet, making them a useful tool for modern web development.
View this on YouTube: https://youtu.be/L8l0fSFX680
Good luck, feel free to connect and follow me.
Follow me please
I’ve lived in California all my life. I grew up in Silicon Valley and have seen so many changed.
Please feel free to follow me on Medium and YouTube, I have classes on Udemy and just started a new Series called “Fast and Simple Development” where you can learn some new technologies and skills that are needed to help upskill yourself in today’s job market or simply continue to make the move up the ladder by adding to your technical chops.
https://www.youtube.com/@fastandsimpledevelopment
https://www.udemy.com/user/tomjay2
