How can you use CSS variables to make everything more dynamic?

You may have already experienced that moment when you wanted to change the primary color of one of your projects? Or maybe you've had those moments when you had to go back to retrieve the theme colors of your site? All of this is time-consuming and very inconvenient. Thanks to CSS variables, that will be a thing of the past! Let's discover how we're going to do it.

Let's Start with an Example

Nothing beats starting with a concrete example to learn something new. What we suggest is starting with a site that has two divisions: one presents a welcome title, and the other displays text with contact methods.

The example is very simple, but our goal is not to build something advanced: we just want to learn how to use CSS variables.

Here is the code:

<div class="bienvenue">
  <h1>This site uses CSS <span>variables</span></h1>
</div>

<div class="contact">
  <p>Contact us on our social networks:</p>
</div>

body {
  font-family: arial;
  background-color: #121416;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

h1 {
  color: yellow;
}

.bienvenue {
  background-color: green;
  padding: 15px;
  border-radius: 9px;
}

.contact {
  background-color: yellow;
  margin-top: 10px;
  border-radius: 9px;
  padding: 15px;
}

Let's Add Our Variables

In our basic example, we can already notice a problem: we are repeating many values.

• The color yellow which could be our primary color;
• The color green which could be our secondary color;
• The internal margins - padding - which are reused identically;
• The rounded corners - border-radius - with the same angle.

All of this works fine, but it's not viable for large projects. Remember our founding principle as a web developer:

Don't Repeat Yourself.

Our goal would therefore be to isolate these values so that we can reuse them everywhere. In this way, we will create style sheets:

1. Consistent: with the same values;
2. Simple: without having to search for the values we used;
3. Readable: thanks to the variable names.

To do this, we will need to use :root. This special selector allows us to store variables that will be available throughout our style sheet.

:root {
    /* Our variables here */
}

We will also need to create variables. To create a variable, simply use two hyphens -- followed by the name of the variable, a name that you can invent and that should describe what the variable contains, then accompany it with a colon : and the value with a semicolon ; to finish.

:root {
    --myFirstVariable: yellow;
}

But wait, you're using a bit of a special syntax, aren't you?

Exactly. To create a variable, you can name it whatever you want and write it in whatever way you prefer, but there is a convention that exists (a convention is a rule that it's good to follow but if not followed, it won't penalize your project or prevent it from functioning correctly): camel case.

This rule states that a variable should start with a lowercase letter, and each subsequent word should start with an uppercase letter. Here are some examples:

:root {
    --myFirstVariable: yellow; /* correct */

    --MyFirstVariable: yellow; /* incorrect */
    --myfirstvariable: yellow; /* incorrect */
    --MYFIRSTVARIABLE: yellow; /* incorrect */
    --myFiRsTVaRiAbLe: yellow; /* incorrect */
}

Well, we know how to write a variable and we've learned what camel case means. However, we still don't know how to use it.

To use a variable, you simply need to call it.

And to call it, we must inform the browser that we want to use a variable by specifying var() instead of the value. Here's an example.

:root {
    --primaryColor: yellow;
}

h1 {
    color: var(--primaryColor);
}

We start by creating a variable --primaryColor and we use its value by calling it with var(--primaryColor). Simple, right? Here's what our previous example would look like with variables.

:root {
  --primaryColor: yellow;
  --secondaryColor: green;
  --padding: 15px;
  --borderRadius: 9px;
}

body {
  font-family: arial;
  background-color: #121416;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

h1 {
  color: var(--primaryColor);
}

.bienvenue {
  background-color: var(--secondaryColor, purple);
  padding: var(--padding);
  border-radius: var(--borderRadius);
}

.contact {
  background-color: var(--primaryColor);
  margin-top: 10px;
  border-radius: var(--borderRadius);
  padding: var(--padding);
}

You now have a consistent, simple, and most importantly, very readable code.

Fallback Values

There's even more, with variables: fallback values.

We are never truly safe from a variable that might no longer exist or a typo. To avoid these issues, we can specify a value to use if the variable does not exist.

Here's how to use it:

.contact {
  /* --- */
  padding: var(--padding, 5px);
}

If we have a --padding variable, all is well, but if we remove it, then the padding will use the fallback value.

Thus, we will have 5px.

Conclusion

You now master everything you need to know to use CSS variables! If you want to learn more about HTML and CSS, we have a comprehensive course dedicated to these two programming languages. Also, feel free to share this article with your network on your social media. Thank you!