EASEOUT

Custom Properties (commonly known as CSS Variables) are a modern addition to CSS. If you’ve worked with programming languages such as JavaScript, Python, etc, you’ll know that variables are extremely useful.

A variable is a name which refers to a value, and by using variables in CSS we greatly reduce code repetition & create much more easily maintainable stylesheets.

Defining a CSS Variable

We define a variable by using a name beginning with a double hyphen (--variable-name), followed by a colon and a value (any valid CSS value):

:root {
  --main-color: green;
}

The :root pseudo-class is a special selector, that applies the style globally to the HTML document. More on this later!

The variable can be accessed using var():

p {
  color: var(--main-color)
}

Defining Variables in Elements

We can define CSS Variables inside of any element:

:root {
  --default-padding: 30px 30px 20px 20px;
}
body {
  --main-bg-color: brown;
}
p {
  --main-color: yellow;
}
a:hover {
  --main-color: red;
}

Variable Scope

Each variable is available only to child elements of the selector they are defined in — this is the ‘scope’.

Let’s see this in the context of our previous example using :root:

:root {
  --main-color: green;
}

:root is a special pseudo-class that refers to the the root element of a tree.

In an HTML document, the :root selector refers to the html element. And in fact, it has a higher specificity than html so it will always take priority.

So when a variable is applied to :root it’s considered to have ‘global scope’ & is available to all elements.

If we added a variable to a main element, it’d only be available to children of main:

main {
  --main-color: yellow;
}

If we attempt to use it using it outside of this element, it won’t work.

So with our two variables as follows:

:root {
  --main-color: green;
}
main {
  --main-color: yellow;
}

Our --main-color will be green anywhere in our document, except for main and any of its child elements — they will be yellow.

Bonus tips..

Case sensitivity

CSS variables are case sensitive!

:root {
 --color: green;
 --COLOR: yellow;
}

So --color and -COLOR are two separate variables.

Using variables in HTML

Variables can be used directly in HTML, like so:

<!--HTML-->
<html style="--size: 800px">
body {
  max-width: var(--size)
}

Using variables within variables

A variable can be used within another variable:

--base-red-color: #f00;
--background-gradient: linear-gradient(to top, var(--base-red-color), #222);

Using variables with math

CSS variables can be used with the calc() function:

--input-width: 500px;
max-width: calc(var(--input-width) / 2);

Using variables with media queries

We can make CSS variables conditional with media queries!

The following code changes the value of the padding, based on the screen size:

:root {
	--padding: 25px 
}
@media screen and (max-width: 750px) {
	--padding: 10px
}

Setting a fallback value for var()

When you use the var() function you can define a second parameter. This value will be used if the custom property is not found:

width: var(--custom-width, 33%);

Wrapping up

I’m sure you can tell that the use of CSS variables will make your code much more readable and maintainable.

They also significantly improve the ease of change across larger codebases. If you set all your constants in a separate CSS file, you won’t find yourself jumping through thousands of lines of code, whenever you want to make a simple change!

A little about me..

Hey, I’m Tim! 👋

I’m a freelance business owner, web developer & author. I teach both new and experienced freelancers how to build a sustainable and successful freelancing business. Check out my Complete Guide to Freelancing if you'd like to find out more.

While you're here, you can browse through my blogs where I post freelancing tips, code tutorials, design inspiration, useful tools & resources, and much more! You can also join the newsletter, or find me on X.

Thanks for reading! 🎉