CSS Variables

CSS variables aka custom properties allows you to reuse values throughout your stylesheet. It increases your efficiency, reduce code duplication and a lot of cool tricks you could do with them.

Global Variables

We can define global variables that will be use throughout the entire website on the root element.

:root {   --warning-color: yellow;    /* Format --<YOUR_VARIABLE_NAME>: <ANY_CSS_VALUE> */}

Start with the double dash, followed by whatever name you want to use for the variable. Then you can use any valid CSS value.

Then you can use the variable with the var function.

body {   color: var(--warning-color);}

Tips: When calling a CSS variable with the var function, You can pass in a second argument as a fallback value.

body {   color: var(--warning-color, red);}

As example above, if the variable is undefined or invalid CSS value, then it will use red instead.

Now by using the CSS Variables, when we want to change the value, we just need to update once instead of go through every places.

Variable Cascade Downwards

We can override the Global CSS variables value in the children. Let's say we have a global variable in previous example, and we have a card class that change the --warning-color variable to red. So the HTML element with this card class will use the red value instead of yellow value.

/* Global */:root {   --warning-color: yellow;}/* Local */.card {   --warning-color: red;}

That means we can change the appearance of our website by simply tweaking CSS Variables value. This concept very powerful when combine with Media Queries.

For example if the viewport is smaller, you may want to decrease the margin between HTML elements instead of updating potential more than 100 CSS classes, just define a media query and change the CSS variables value.

@media screen and (min-width: 600px) {   :root {      --margin-base: 10px;   }}/* Small Screens */@media screen and (max-width: 600px) {   :root {      --margin-base: 6px;   }}

Another example is we can use the prefers-color-scheme media query to toggle between light theme and dark theme based on the user's device preferences.

@media (prefers-color-scheme: dark) {    :root {       --text-color: white;       --background-color: black;    }}

Besides that, CSS variables also work great with calc

.my-title {   --regular-number: 8;   margin: calc( var(--regular-number) * 1px );}

Besides that, you are not limited to use a single variable in a property value. For example below we can define several variables.

:root {   --red: 86;   --green: 23;   --blue: 107;}.content-card {   color: rgb( var(--red), var(--green), var(--blue) );}

This makes CSS Variables extremely useful on building themes. This is because when we combine with Javascript and change the CSS classes on the fly, then the browser will automatically repaint the style of the website.

Thanks for reading.

Above is what I learnt about CSS Variables and how to apply them. If you have any other interesting way on using CSS Variables, please comment below to share with me.