Optimize Your CSS Length with CSS Variables

Have you ever got to a point where you had to write a lot of CSS, and you got lost in your own code? If you are like me, sometimes you have to keep the hex codes of colours or text-size at a place that you can access and reuse. In this post, I will share knowledge on how to optimise your CSS using CSS Variables. CSS variables are values we define to be re-used throughout a CSS document. CSS variables also referred to as custom properties are set in one place and referenced at many places like you will set a variable and reference it in other programming languages.

Declare a Custom Variable

The catch here is how to declare a variable and how to access them. A variable in CSS is defined by starting it with two dashes, followed by the name of the variable. This is an example how to declare a custom variable in CSS.

:root{
  --main-color:#54BBCE;
}

Setting a variable in the root selector is useful as it gives us the ability to access it throughout the entire document. We could define it in a selector but it will be only available to that selector, which will not be useful.

How to use a custom variable?

Once a custom variable has been defined, the next thing we could do is to use it in another part of the code. To use a custom variable, we use the keyword var().

.menu {
  width: 100%;
  background-color: var(--main-color);
}

The var keyword that we use to access a custom variable takes two parameters. The first one is the name of the custom property to be substituted, the second is a fallback value, which is used when the referenced custom property is invalid.

.menu {
  width: 100%;
  background-color: var(--main-color, #999AAA);
}

Invalid properties and fallbacks

When we substitute a property that is not valid like in the example below, the initial or the inherited value of the property is used.

:root {
  --main-color: #da68aa;
  --tag-text: 12px;
}
...
.author {
  color: red;
}
...
.author-tag {
  color: var(--tag-text);
}

The colour of the element with .author-tag class will be red because, the property provided to the var is invalid.

Below we have an example written with CSS custom variables and without. There is a significant reduction in the number of line in code that was written.

CSS with Custom properties

:root {
  --main-color: #da68aa;
  --tag-text: 12px;
}
body {
  font-family: sans-serif;
}
.menu {
  width: 100%;
  background-color: var(--main-color);
}
.menu ul {
  width: 100%;
}
.menu ul li {
  display: inline-block;
  color: #ebeae6;
  width: 20%;
}

.welcome h1 {
  color: var(--main-color);
}
.author {
  color: red;
}
.author img {
  width: 20%;
  border: 2px solid #0269adc5;
}
.author-tag {
  color: var(--tag-text);
}

button {
  border: none;
  padding: 5px;
  border: 1px solid var(--color, black);
}
button:hover {
  background-color: var(--color);
}
.php {
  --color: blue;
}
.ruby {
  --color: red;
}
.js {
  --color: rgb(131, 245, 1);
}
.react {
  --color: rgb(1, 135, 245);
}

CSS without Custom properties

:root {
  --main-color: #da68aa;
  --tag-text: 12px;
}
body {
  font-family: sans-serif;
}
.menu {
  width: 100%;
  background-color: var(--main-color);
}
.menu ul {
  width: 100%;
}
.menu ul li {
  display: inline-block;
  color: #ebeae6;
  width: 20%;
}

.welcome h1 {
  color: var(--main-color);
}
.author {
  color: red;
}
.author img {
  width: 20%;
  border: 2px solid #0269adc5;
}
.author-tag {
  color: var(--tag-text);
}

button.php {
  border: none;
  padding: 5px;
  border: 1px solid blue;
}
button.ruby {
  border: none;
  padding: 5px;
  border: 1px solid red;
}
button.js {
  border: none;
  padding: 5px;
  border: 1px solid rgb(131, 245, 1);
}
button.react {
  border: none;
  padding: 5px;
  border: 1px solid rgb(1, 135, 245);
}

.php:hover {
  background-color: blue;
}

.ruby:hover {
  background-color: red;
}
.js:hover {
  background-color: rgb(131, 245, 1);
}
.react:hover {
  background-color: rgb(1, 135, 245);
}

We could reduce the size of our CSS files when we make good use of Custom properties. It also facilitates the ease of access and change across large documents. Using a value is as easy as referencing the property name.
There is little we can do with CSS variables, but, because it is part of CSS you won't have to install anything to make use of it.