๐Ÿ”ต CSS Variables Overview ๐Ÿ”ต

Thread By @MrConerMurphy

๐Ÿ”ต CSS Variables Overview ๐Ÿ”ต

CSS Variables otherwise known as custom properties or cascading variables are a great way to reuse the same values across multiple elements & properties.

Let's take a closer look at them. ๐Ÿงต

Let me know, did you learn something new? ๐Ÿ’ฌ


var _excluded = ["components"];

function _extends

22/05/2021 18:10

1๏ธโƒฃ What are CSS Variables?

CSS Variables allow us to define a value in one central location and use it multiple times in any child element or property.

โ“ Why this matters?

๐Ÿ‘‰ Because it means we only have to change one line of code to change the value everywhere.


22/05/2021 18:10

2๏ธโƒฃ Basic Setup

CSS Vars can be defined in any element on the page and its children will be able to access them.

But, a more common method is to define all common vars like colours and font sizes in the :root selector. This makes it available on the entire website.


var _excluded = ["components"];

function _extends

22/05/2021 18:10

โ— Case Sensitivity

Something to watch out for is case sensitivity if we define 2 variables:

Variable-1 variable-1

They will be treated as different vars.

โญ To avoid this set up a naming convention and follow it for all your variables. e.g. all lowercase


22/05/2021 18:10

3๏ธโƒฃ Inheritance

CSS Vars do inherit. For example, if we don't set a var on an element, it will inherit the value used by its parent.


var _excluded = ["components"];

function _extends

22/05/2021 18:10

4๏ธโƒฃ Fallback Values

You can specify a fallback value to be used as well should your CSS var not be defined.

โ— Fallback values aren't used to fix browser compatibility, if the browser does not support CSS vars it will not help. It's just for if the var isn't defined.


var _excluded = ["components"];

function _extends

22/05/2021 18:10

5๏ธโƒฃ Invalid Values

If the browser encounters invalid values. E.g.

text-size: 8px; color: var(text-size);

Then ๐Ÿ‘‡

1: Check if the property is inheritable. If the parent doesn't have that property, go to 2. 2: Set the value to its default initial value.


22/05/2021 18:10

๐Ÿ“š Read More / Sources

The MDN Doc on CSS Variables is a great help and was the source of this thread.

Check it out here:



๐Ÿ”— Links in this Tweet:

22/05/2021 18:10

Did you enjoy this thread or find it helpful? If so I would greatly appreciate it if you would consider doing one of the following:

โค๏ธ Like these tweets ๐Ÿ”„ Retweet the first tweet in this thread so others can see it. ๐Ÿ‘ค Follow me for more content like this.


22/05/2021 18:10

Email Newsletter

Want to get weekly notifications of my posts and more exclusive content?

Please consider signing up to my email newsletter.