How to use CSS Vars
Tags: css, css3
Published: 2020-05-02 07:29:23

CSS Vars are amazing, and you should leverage these where possible.
I must admit I'm only using them recently, but a tip for any developer is if you have to reuse code, it's useless. Write better classes, have it in one stop etc.

CSS Vars can be a solution here, let's look at how these work.

## HTML Setup

```html
<div class="section">
  <div class="card card-blue"></div>
</div>
<div class="section">
  <div class="card card-red"></div>
</div>
```

And then for the CSS we can do the following:

```css
:root {
  --primary-color: #89bbfe;
  --secondary-color: #6f8ab7;
  --card-color: #cae5ff;
  --border-color: #acedff;
  --border-radius: 10px;
  --border-small: 3px;
}
section {
  width: 100vw;
  height: 100vh;
  background: var(--primary-color);
  padding: var(--padding-medium);
  display: flex;
  justify-content: center;
  align-items: center;
}
section:nth-child(even) {
  background: var(--secondary-color);
}
.card {
  width: 50%;
  height: 50%;
  background: var(--card-color);
  padding: var(--padding-small);
  border-radius: var(--border-radius);
  border-top: var(--border-small) solid var(--border-color);
}
```

So the cool part is we declare the `:root` section where we can make our variables this can be a lot of things including colours, paddings, spaces etc.

In our example you can see we can even use them inside complicated css statements like the border one: `border-top: var(--border-small) solid var(--border-color);`.
As you can see, we can use two variables without problems here.

Then in our code we use these variables like `var({name})` you have to replace the {name} with the actual name.

You can see this in action in this Codepen.

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="rebelchris" data-slug-hash="VwvzKKm" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="How to use CSS Vars">
  <span>See the Pen <a href="https://codepen.io/rebelchris/pen/VwvzKKm">
  How to use CSS Vars</a> by Chris Bongers (<a href="https://codepen.io/rebelchris">@rebelchris</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## When to use CSS Variables?

That's a good question, I think it's really important you don't re-use code it's quite useless to type the same code over and over so anything that is re-used you should make a variable for.

Also this process makes it way easier to change things in one place later on.

Let's say your boss wants to rebrand to red instead of blue, now you just have to change your variable and your done!

## Browser support

The bad thing about these awesome variables is that they are not supported by Internet Explorer.

![CSS Variables support](https://caniuse.bitsofco.de/image/css-variables.png)

### Thank you for reading, and let's connect!

Thank you for reading my blog, feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)