paint-brush
Optimize Your CSS Length with CSS Variablesby@edemagbenyo
1,169 reads
1,169 reads

Optimize Your CSS Length with CSS Variables

by Edem AgbenyoFebruary 15th, 2020
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

CSS Variables are values we define to be re-used throughout a CSS document. CSS variables are set in one place and referenced at many places like you will set a variable in other programming languages. A variable in CSS is defined by starting it with two dashes, followed by the name of the variable. The var keyword that we use to access a custom variable takes two parameters. The first one is the name the property to be substituted, the second is a fallback value. There is a significant reduction in the number of line in code that was written.

Company Mentioned

Mention Thumbnail

Coin Mentioned

Mention Thumbnail
featured image - Optimize Your CSS Length with CSS Variables
Edem Agbenyo HackerNoon profile picture

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.