How To Use CSS Variables

Hey! Today we are going to go over CSS variables. This post will be broken down into two sections: one for how to create CSS variables and one for how to use CSS variables.

I also have a ridiculously overdone CodePen example you can play with at the bottom of this page. It should be pretty easy to modify because I tried to label and comment out everything clearly.

CSS Variables

Variables are now native to CSS and not only exclusive to preprocessors. Variables are a very popular feature in CSS preprocessors like SASS.

More support in browsers (minus Edge and Internet Explorer) means variables can easily be used in your own code.

How To Declare CSS Variables

CSS variables are best defined in the :root pseudo-class at the top of your stylesheet. :root refers to the highest level parent in your DOM structure, usually the HTML tag. It's a type of universal selector.

This keeps your code organized and prevents the need to declare variables more than once. Here is a quick example of how to create a CSS variable.

:root {
  --primary-color: red;
}

The pseudo-class :root acts as your selector. Your variable is stated by two preceding dashes and a name followed by a value. You can then reference this variable in any applicable case. Here is an example.

:root {
  --primary-color: red;
}

p {
  background-color: var(--primary-color);
}

In this case, we are changing all paragraph background colors to hold the value of
--primary-color, which we have already defined as red within the :root pseudo-class.

How To Correctly Use CSS Variables

Using variables can create complex issues within code. For example, take this variable declaration below.

:root {
  --red: #f44336;
}

If you wanted to change the red to blue, you would either have a misnamed variable across your stylesheet, or you would have to change the variable of each individual instance.

These are both issues you would seemingly want to avoid. It defeats the purpose of using variables for easy editing and speed.

The correct way to code a CSS variable would be in a 2 step process like I have outlined below:

:root {
  --red: #f44336;
  --primary-color: var(--red);
}

Creating your variables with this 2 step system allows for easy and efficient editing. If you wanted a different shade of red across your style sheet, you could just change it in the --red: variable. Otherwise, you would have to change every value in your stylesheet manually.

You could also change your primary color at the variable level. If you wanted blue as your primary color, you would only have a two step edit for that.

You would just define a blue color variable, then add this as your primary color value. Here is a visual representation. It builds off of the previous example.

:root {
  --red: #f44336; /*Previous primary color*/
  --blue: #00BAF0; /*New primary color*/
  --primary-color: var(--blue); /*Changed From --red To --blue variable*/
}

Practical Use Cases

There are many practical (and impractical) uses for CSS variables. I will outline the ones I think are practical below.

Colors & Style Guides

With variables, you can create and easily amend your style guides. It is the best way to. Here's a practical style guide example using the colors on our website as a guide.

:root {
/*Colors*/
  --blue: #00BAF0;
  --white: #fff;
  --gray: #f4f4f4;
  --orange: #FF9545
  --green: #4c6520;

/*Style Guide*/
  --primary-color: var(--blue);
  --secondary-color: var(--white);
  --accent-color: var(--gray);
  --button-1: var(--orange);
  --button-2: var(--green);
}

This process allows for quick and easy edits in the long run. You can make small color changes without having to go around and edit your entire CSS.

It also allows you to semantically mark up your CSS without any sort of confusion later. It is very straightforward.

Margins & Padding

You can also easily define default margins and padding for elements with variables. Here's a quick example below:

:root {
  --general-margin: 10px 0;
  --general-margin-2: 20px 5px;
  --general-padding: 10px;
}

/*CONTENT BOXES*/
.box {
  margin: var(--general-margin);
  padding: var(--general-padding);
}

.box-2 {
  padding: var(--general-padding);
}

Heights & Widths

This is interesting because you can use CSS calc() to make some relational calculations. Here is a quick example before I explain:

:root {
  --parent-height: 43%;
  --parent-width: 40%;
}

.parent {
  height: var(--parent-height);
  width: var(--parent-width);
}

.child {
  height: calc(var(--parent-height) - 100px);
  width: calc(var(--parent-width) - 60px);
}

You can define parent element sizes, then make sure the children are calculated against the parent. It works very well, especially when making responsive items.

Other Miscellaneous Styling

Font styling, box-shadow, animations, etc., are all types of attributes variables work for. You can use these variables in any way you like.

Just make sure they are semantically labeled and well thought out. It can get messy to use a lot of variables. You can check that out in the example below.

Note: You can live-edit the demo below.