How to Use CSS Variables Like a Pro
CSS variables, also known as custom properties, help you to minimize repetition in your style sheets. This, in turn, helps you save time and effort when making changes to your design. You can also rest assured that you won’t miss any values you need to update.
Sign up forfree
Forgot your password?
Create an account
*Required: 8 chars, 1 capital letter, 1 number
By continuing, you agree to thePrivacy PolicyandTerms of Use.You also agree to receive our newsletters, you can opt-out any time.
How to Define and Use CSS Variables
To make your style sheets more arranged, maintainable, and reusable, you’re able to utilize CSS variables in any property that accepts a value.
Take the following example of an HTML file and CSS file that doesn’t use CSS variables.
This is what your page should look like:
The.btnclass used in the above style sheet isn’t dynamic and causes you to create a separate class to customize individual buttons. Creating beautiful websites requires you to be dynamic with your front-end styling. Implementing buttons this way will simply make that task a pain to achieve.
Like most programming languages, You have to initialize and substitute CSS variables.
To initialize a CSS variable, prefix the variable name with double hyphens:
You can initialize a variable anywhere but note that you will only be able to use that variable inside the initialized selector. Because of this, CSS variables are conventionally initialized inside the root selector. This targets the highest-level element of the DOM and allows the variables to be accessible by the entire HTML document on a global scale.
To substitute the variable into your CSS styling, you will use thevar()property:
The root selector contains two variables:–primaryand–secondary. Both variables are then substituted into the.btnclass as a color and background color respectively.
Using the variables, you may style individual elements much more easily. By reusing variables, you can quickly change a value once to update it in every instance.
Thevar()property can also take a second argument. This argument acts as a fallback value for the first argument in a situation where the first is not defined or is invalid.
For example:
In this example, substitute the–primaryvariable intocolorstyle. If for any reason, this value fails, the style sheet will use the second value as a fallback. You can also use another CSS variable as a fallback value.
Manipulating and Overriding CSS Variables With JavaScript
Manipulating CSS variables using JavaScript can be a powerful way to change the look and feel of your website on the fly. Using JavaScript, you can update the values of these variables and see the changes reflected in your site.
It’s important to note that the changes made with JavaScript will only apply to the current session. You must either update the original source orstore the new value on the client, like in a cookie, to persist the changes.
Here is an example of how to use JavaScript to update the value of a CSS variable.
In this JavaScript code, thechangeColor()function updates the color of the first button when the user clicks on it.
UsingDOM traversal methods, you may access the classes or selectors applied in your HTML document and manipulate the values.
Before clicking the button:
After clicking the button:
You can also use JavaScript to create new CSS variables or remove them altogether.
Using CSS Variables With Preprocessors
Using variables within frontend technology was initially achieved with CSS preprocessors likeSASS, LESS, and Stylus.
The purpose of CSS preprocessors is to develop code that extends the fundamental capabilities of standard CSS. Then have that code compiled into standard CSS for the browser to understand, much likehow TypeScript works with JavaScript.
With the development of CSS variables, preprocessors are no longer as important, but they can still offer some use if combined with CSS variables in your project.
You can define a SASS variable$main-colorand use it to set the value of a CSS variable. Then, use the CSS variable in a regular style class.
You can also use SASS functions to manipulate the values of CSS variables.
Here, the SASS functionlighten()manipulates the value of–primaryto obtain a value for–secondary.
Note that SASS variables are not accessible by JavaScript. So if you need to manipulate the values of your variables at runtime, you should use CSS variables.
Using CSS variables and preprocessors together, you can take advantage of both benefits, like using powerful preprocessor features like loops and functions and CSS variables feature like CSS cascading.
Tips for Using CSS Variables in Web Development
Here are a few important tips to note that’ll help you utilize CSS variables better.
Start With a Clear Naming Convention
Choose a naming convention for your variables that makes them easy to understand and use. For example, use a prefix such as–color-for color variables or–spacing-for spacing variables.
Use Variables in Media Queries
Use variables in media queries to make it easy to adjust your design for different screen sizes.
Take Advantage of the Cascading Nature of CSS
Remember that CSS variables are cascading, meaning that if you set a variable on a parent element, it will affect all its children.
Use CSS Variables With Caution
Using too many CSS Variables can cause confusion, so use them with caution, and only when it makes sense and improves the maintainability of your code.
Test Your Variables
CSS variables are a unique way to write clear and maintainable code within your style sheet.
It is important to note that they are still not fully supported on all browsers. Hence, you should test your variables for browser compatibility to ensure that they are working as expected and that any fallback values work as you expect them to.
Simple, effective code is the way to go when programming. Check out how to build your own calculator in HTML, CSS, and JS.
Make sure you don’t miss these movies and shows before Netflix removes them.
Obsidian finally feels complete.
I found my TV was always listening—so I shut it down.
These plugins will make you wonder why you used Photoshop in the first place.
Flagship price, mid-range phone.
