CSS Custom Properties

AKA CSS Variables

Written by Carla Benson and Nikki Simmonds

Ever find yourself scrolling for a long time to update a value somewhere? Then fear no more because CSS custom properties make the lives of designers much easier. CSS custom properties, which are often also called CSS variables, store values within an entity which we refer to as a variable. We can then use the variable throughout the stylesheet to define values of selected properties. Custom properties make it possible to implement stylistic changes across an entire site with minimal effort and therefore results in “leaner” and “DRY” (Don’t Repeat Yourself) code. 

So…where do you get started?  

Before you can use custom properties, they must first be created somewhere. Custom properties are usually defined within the root pseudo class at the top of the stylesheet. The root element is at the top of the hierarchical tree and the root has a global scope, so defining the custom properties within it enables them to be applied to any element within the html file.  

:root { --blue: #1a9b9b;}
The syntax for creating your custom variable for CSS.

It is possible to define a custom property in a class selector, but the custom property will only have local scope and therefore will only be useable within that class selector and nowhere else.  

How do you define them?

You can define the custom property with any name that you like, but before doing so you have to prefix the name with two hyphens. Cases can be used but they are case sensitive. In the example below, hexadecimal values have been named to make it easier to refer to a brand colour scheme. The name is followed by a colon, the value and a semi-colon.  

:root {--blue: #1a9b9b;}
Explaining the different parts of the syntax for creating your custom property.

The use of custom properties is limitless, you can define a new name for any value:; font The use of custom properties is limitless, you can define a new name for any value: font stacks, font sizes, section padding, display properties etc… Sounds useful, right?!  

USEFUL NOTE!
It is worth taking time to consider the name of your custom property. In this example we are giving names to hexadecimal values. You might be tempted to describe the colour as we do here. However, if you then later decide to change this colour to something different, like black, you can easily change the hexadecimal value, but now all of your CSS describes this colour as black. If you change it, you have to go through the entire cascade, and it defeats the objective of it! Therefore, think about using a term that describes your branding, like main-colour, bold-colour or accent-colour. 

How do you now use your custom property? 

Now that you have created your own custom property you need to select the element you want to modify and declare the property of that element you want to change. This is very similar to how you normally modify an element in CSS. However, instead of inputting the value you input the custom property you have created. 

h1{ color: var(--blue);}
The syntax for using your custom property in your CSS.

The difference in the CSS is that you need to declare that you are using a custom property. To do this – you type var, followed by an open bracket, then the custom property name prefixed by two hyphens, close the bracket and put your usual semi colon at the end.  

This is why people often call CSS Custom Properties, Custom Variables. 

Hopefully the usefulness of custom properties is becoming clearer to you now.  

Perhaps you are thinking of making some quick changes to your design and think it would look better if the colour was darker?  Luckily it is very easy to update the colour now that you have used a custom property. All you need to do is update the hexadecimal value in the root selector and all instances of the element on the webpage will be updated. This prevents having to painstakingly update every element and value in the CSS file. 

What if you want a single element to look different though?  

If you have used a custom property to define the colour of a recurring element on a webpage (a paragraph for example), and perhaps one of the paragraphs may look better if it was a different colour – there is a way to do this quickly.  

Custom properties can be overwritten and overridden but it is worth noting that it isn’t recommended to do this too often (as shown in the below example) because it defeats the purpose of using the custom properties. For example, you may change your mind about them and spend lots of time scrolling through the CSS file to locate and update them.  

In the example here, the colour of the paragraphs have been defined using a custom property called –text-colour. The paragraph in section two of the page would look better if it were white. The custom property is named, the new value is written, and it is then applied to the property. The override will only apply to this paragraph and won’t impact any other selectors that have been styled using the same custom property.   

.nth-child(2)p{--text-colour: white; color var(--text-colour);}
Giving your variable a new value within the pseudo selector you are applying it to.

You can take advantage of the CSS cascade when overriding custom properties. In the previous example, the value of the custom property was overridden within the selector, and it was then applied to the property. This method works well, but perhaps it would be more efficient to assign the new value to a custom property (CSS variable) in the root and use it to override the colour of the paragraph. See the example below. The white value was saved within its own custom property and applied to the pseudo selector in the CSS after the P element. If you happened to change your mind about the override, it would then be easier to update it because you could locate it in the root and update the value there. 

:root{--text-colour: #FFSC8D;--accent-colour: white;}
Add a new custom property in your root selector.
p{ color: var(--text-colour);} .nth-child(2)p{color: var (--accent-colour);}
An example of how the code would look if you created your new variable in the root and applied it to your element.

It is also possible to override a custom property with another custom property. This is another way that you could keep your changes neater, for example. 

root: {--text-colour: #FFSC8D; --accent-colour: white; --text-highlight: var(--accent-colour)}
Creating custom variables within custom variables.

Using overrides to create easier media queries. 

Custom properties really shine when you begin to make your webpages responsive. If you have been designing your site “mobile first,” and have been using custom properties while doing so – media queries will now be a breeze!  

Within each media query, the custom property values need to be redefined within the root pseudo selector. The changes will update any selectors that have been styled with custom properties on the site. This saves a huge amount of time and reduces the length of the CSS file because each element doesn’t need to be targeted individually and given updated values.   

In the above example, a simple 2 column layout has been changed to a four-column layout in only a few steps. The body text and headings have also been enlarged.  

Take a look at the difference in the code if this was done without custom properties. 

Do you need to worry about fallbacks? 

If you are a conscientious web designer like us, then you are often thinking of ways to ensure that every user has an excellent browsing experience, and therefore you might often use fall backs. 

It is worth noting that today the browser support for custom properties is over 96% of worldwide users. Therefore, you might not feel like there is a need for fallbacks. This coverage is great, however there are a few browsers that do not support the function at all, and one of those is Internet Explorer. 

The problem with fallbacks is that they require the browser to support them for them to work. Therefore, fallbacks are redundant when you are trying to ensure that your users have the same experience across all browsers. You can provide a custom property fallback through typing a comma after the custom property name and supplying the value of the custom property. (Like you usually would in CSS.) You can also provide other custom properties as fallback options. Having to provide fallbacks in these ways makes us question whether the use of custom properties is redundant, however. What is the point in using custom properties if you have to provide the value like you usually would anyways? 


There is one useful reason to use fallbacks, and that is if you have made a simple error in your code, or a spelling mistake You could either use the fallback to ensure that the mistake doesn’t have a detrimental effect on the front-end experience. Or you could even use the fallbacks to help highlight any errors so that you can find your error and change it. In this example, the colour red could be used as a fallback after the hexadecimal value, as any error in the code will show in the browser as red. 

Do you use Sass and are unsure why to use CSS for custom properties? 

Remember that Sass is a compiler. It might appear to be doing the same thing as creating a CSS property, but at the end of the day the original value will be shown in the final compiled CSS. 

The examples shown where custom properties are overridden (such as for media queries) cannot be done with Sass. To do this in Sass, you would have to create different custom properties altogether. This adds more code, so using custom properties is therefore quicker and leaner. 

You can also unleash even more useful techniques with custom properties as it will interact with JavaScript. Sass doesn’t interact with JavaScript.  

So, if you are already using Sass, of course you can use its custom properties function, however there is nothing to stop you using CSS custom properties with your compiled CSS, as we think the power of CSS custom properties is much more useful than the compiled CSS that Sass will do when you use the custom properties function. 

Final Thoughts  

CSS custom properties are extremely useful and have many advantages. They make values easier to reference, make your CSS easier for someone else to read, produce leaner code and enable the implementation of large changes without much effort. CSS variables can also be manipulated by JavaScript. The browser support is high, but some browsers cannot support it. The main drawback of using CSS custom properties is the lack of useful fallback options . In conclusion, it is clear to see that the pros outweigh the cons and that making some compromises would likely be worth it.

References  

Chris Coyier (2021) A Complete Guide to CSS Custom Properties. Available at https://css-tricks.com/a-complete-guide-to-custom-properties/ (accessed Feb 2022) 

Kevin Powell (2017) CSS Variables (All 6 parts). Available at https://youtu.be/PHO6TBq_auI (accessed Feb 2022) 

Using CSS custom properties (variables) (2022). Available at: https://developer.mozilla.org/enUS/docs/Web/CSS/Using_CSS_custom_properties (Accessed: Feb 2022 

Dev Ed, (2019) Learn Sass in 20 Minutes | Sass Crash Course. Available at https://youtu.be/Zz6eOVaaelI (Accessed: Feb 2022) 

CSS Variables (custom properties) (2022). Available at: https://caniuse.com/css-variables (Accessed: Feb 2022) 

Leave a Reply

Your email address will not be published.