How To Use CSS Variables

CSS is the source of beauty behind every website, when writing css some values are usually repeated like the color, padding or margin and they sometimes require changes, imagine having to change the color value in a large CSS file where it has been applied in more than 10 lines that will require a lot of time looking for where it was applied.

CSS variables also called custom properties make it possible to effect this change in just one line saving time. Another reason to consider using CSS variables in your next project is its semantic identifier instead of using #62013C which is less readable you can use (--primary-color) a more meaningful value

After reading this article you should be able to apply CSS variables in no time to your projects

Why Should You Care About CSS Variables?

Let's say you want to set the color of text in two sections in your website the main header and sub header the old way would be to declare the values in multiple places

.main__header{
  color:#F03861;
}
.sub__header{
color:#F03861;
}

The new way with CSS variable would be to just declare the value in one place(a variable)

:root{
--pink:#3466f6;
}

To apply the value which was stored in the variable :

.main__header{
  color:var(--pink);
}
.sub__header{
color:var(--pink);
}

Now imagine you want to change the shade of pink maybe later in the future all you have to do is change it in the root and the change will be effected

Advantages Of CSS Variables Over CSS Preprocessor

• Easy to use, no set up or transpiling needed.

• Have acess to the DOM

  1. Ideal for responsiveness
  2. Change with Javascript
  3. Local scopes

• Perfect for themes

Using CSS Variables

We will learn using CSS variable by applying it in this basic tutorial we would build 3 buttons with it. to start using css variables you need to declare the variable you want to store a particular value using this format

selector{
--[property-name]:[property-value]
}

for our buttons we could have

button{
--primary-color:#2155CD;
--secondary-color:#0AA1DD;
--disabled-color:#E8F9FD;
}

It is best to have your CSS variables scoped in the :root pseudo-class so that it can be applied globally in your html document. This does not mean scoping it to the button selector is bad either but putting your variable in the :root pseudo-class is best practice so lets re-write our variables

:root{
--primary-color:#57585;
--secondary-color:#57585;
--disabled-color:#58585;
}

How To Appy The Variables We Have Defined

To apply the variables we simply specify it just like we specify every other css property but in the property value we include our variable by starting with a var([variable-name])

.btn__primary{
background-color:var(--primary-color)
}
.btn__secondary{
background-color:var(--secondary-color)
}

Changing The Color

Instead of looking for where the color was applied to change it in a large CSS file all you have to do is locate the variable name in the root and change it from one place in just one line

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

This changes any where var(--primary-color) was used to a red color.

Theming With CSS Variables

Before the introduction of CSS variables, theming use to be a problem as it always lead to perormance issues but with CSS variables this problem was resolved . In the next tutorial i will show you how to customize your theme in a straightforward manner using the power of CSS variables

Customize Themes With CSS Variables

First define a set of global CSS variables in the html ,one set of color for background and font used in dark mode, one set for light mode, and theme variables.

/* light theme color */
html{
  --bg:#ffff;
  --btn-bg:blue;
  --bg-text-color:#5b34eb;
  --white:#fff;
}
/* dark theme color */
html[data-theme='dark']{
   --bg:#000;
  --bg-text-color:#ffff;
}

Our theme variables are custom properties whose names have the prefix --bg. By default when you open this website it uses the default styling of the html selector, the variable names in each theme selector must be constant as this makes future changes easier; instead of scanning through for where a particular color was used we just go to theme selector to make our changes . now we have the global CSS variables, we can now write the styles for our document’s element, using var() and the variables defined.

body{
  background-color:var(--bg);
  color:var(--bg-text-color);
}
.btn{
  padding:0.7rem 2rem;
  background-color:var(--btn-bg);
  border:none;
  color:var(--white)
}

Our page with default light mode will look like this

When we switch theme with JavaScript to dark mode it will look this

This is what the HTML and JavaScript(for switching between themes) look like

And that's it we can have as many themes as we want and switch to each theme whenever we want with JavaScript CSS variables also gives us the power to modify how a particular theme should look like by just making changes to the theme selector instead of searching through your CSS files or adding more CSS to the JavaScript file.

In summary CSS variables help us apply the DRY(Don't repeat yourself) principle removing repetitions from our code. you should start using CSS variables when you notice you are repeating a style rule in multiple places.