CSS variables introduction

CSS Variables

CSS variables called also "Custom properties" is a feature which let us create variables in css files within local or global scope, manage it depends on resolution using media queries or even change those with JavaScript. This is an amazing tool to better organise, reuse and make out code cleaner.

Naming convention:

Name always starts from "—" prefix.

—my-variable-name

Usage

How to assign value to css variable?

Assigning value to the css variable is the same as for a normal property.

:root {
  —bar-color: red; 
}

Great, we have variables defined, but how to use it?

.my-class {
  color: var(—bar-color);
}

As you can see in example above, we just need to use „var” keyword, then open parentheses and put our variable name inside. Cool, but what if variable name is invalid or this variable hasn’t any value assigned?

We can be safe using fallback value as a second argument.

.my-class {
  color: var(—bar-color, blue);
}

In this case blue is our fallback value.

What we can do with CSS variables?

CSS variables let us organise code better, define our variables and values in a global or a local scope and reuse it downwards in css files.

:root {
  —bar-color: red; 
}

.my-class {
  color: var(—bar-color);
}

.my-another-class {
  background: var(—bar-color);
}

p {
  color: var(—bar-color);
}

Overriding

Another advantage is that we can override css variable somewhere in our code to another value if we need it. For example we have an input element which has a label with class „input__label”.
 Initially this label has a grey color.

<div class='input'>
  <label class='input__label>content</label>
  // another code
</div>

.input {
    —input-label-color: grey;
}

.input__label {
    color: var(—input-label-color);
}

Then we would like to change "input__label" color to red if error occurs in particular input field.

.input {
    —input-label-color: grey;
}

.input—error {
    —input-label-color: red;
}

.input__label {
    color: var(—input-label-color);
}

So, what happened? I introduced ".input—error" modifier class for our input element, which override "—input-label-color" value to red.

.input—error {
	—input-label-color: red;
}

Now to indicate an error, we would need to add "input—error" class to our input element if error occurs.

<div class='input input--error'>
  <label class='input__label>content</label>
  // another code
</div>

Real world app examples:

CSS variables with media queries.

Just imagine that you have a margins values defined in the root element.

:root {
  --gap: 10px;
}

Great! What if you decide to go with bigger margins on desktop? Normally you need to create another classes with different margin values to override margins on particular resolution.

Now life is easier. You can use css variables like so:

@media screen and (min-width: 768px) {
    :root {
         —gap: 20px
    }
}

Done! Now devices with resolution equal or bigger than 768px uses 20px margins.
 Smaller devices uses 10px.

Theme example

In the end of this article I would like to show you one more real world application example. Let’s imagine, that our application supports themes.

Using css variables you can simply define it somewhere in the application/website. Let’s say, we will prepare a div element as a theme wrapper.

<div class={‚theme-wrapper’} />

As a default we would like to use ‚light’ theme, and with a modifier class we would like to override colors to ‚dark’ theme.

.theme-wrapper {
  --theme-primary: orange;
  --theme-text: black;
  --theme-bg: lightgrey;
}

Then we can use our variables in css files downwards. If we change a theme using .theme-wrapper—dark class, then we replace colors to defined within .theme-wrapper—dark scope. To do this, we could create following class

.theme-wrapper—dark {
  --theme-primary: rgb(255, 0, 119);
  --theme-text: white;
  --theme-bg: black;
}

And then we can add or remove theme—dark class from

<div class={‚theme-wrapper’} />

Conclusion

CSS variables is a very powerful tool which let us handle css a way better then before. It let us avoid multiple modifier classes creation, creates sharable variables to make our code much cleaner and more reusable.

There you can find helpful repository with media queries and themes example: https://github.com/michalrozenek/04-css-variables