Introduction to CSS variables | Perpetuum Mobile

Introduction to CSS variables

Zvonimir Dimovski CSS, CSS variables
Introduction to CSS variables

CSS preprocessors (Sass , Less, etc.) are one of the main tools used today by frontend developers to organize their code better, ensure better compatibility through different browser versions, and cut user interface development time through embedded modularity.

One major reason why developers use preprocessors is that their variables enable them to reduce repetition when writing code. For example, it is not uncommon that changing an application’s appearance in some way requires the same change to be made in several places within a CSS file.

CSS preprocessors are excellent, but they are not perfect: on top of good old CSS, they put an extra level of abstraction (a different way of writing code that’s compiled in CSS), which requires the whole team to adapt to a new technology. In addition, careless coding (of Less/Sass) can, after processing, result in a very ugly and illegible CSS file.

After everything we have seen, the following question arises: Can we get equal functionality with no problems with native CSS alone? The simple answer: NO, but (there’s always a “but”) W3 has presented CSS variables, which can substitute CSS preprocessors in one important area.

A simple example of how CSS VARIABLES can be used in native CSS

:root {
  --base-font-size: 15px;
  --brand-color: #6495ed;
}
p {
  font-size: var( --base-font-size );
}
a {
  font-size: var( --base-font-size );
  color: var(--brand-color);
}
.header {
  color: var(--brand-color);

.footer {
  background-color: var(--brand-color);

Basic concepts

In the example given above, we can see three new components that one doesn’t often come across in CSS:

1. the :root pseudo-class
2. the var() function
3. custom properties

The :root pseudo-class

We can use our custom properties anywhere, that is, within any element, but good practice recommends that we define them in one central place. The :root pseudo-class represents the highest level of an HTML document, and for this reason, it is the best place to keep custom properties. 

The var() function

In order to apply our custom properties to elements, we have to use the var() function—otherwise, the browser won't understand them, and the display won't appear the way we want it to.

Custom properties

Frontend developers and web designers are well-acquainted with standard CSS properties that are already embedded in CSS by default – such as color, width, margin, and background-color.

Custom properties are those which we as developers define and name for use in our own unique situation. In order to use them according to standard, we have to add the prefix “--” (as in the following example: --base-font-size, --brand-font-size, --brand-color)

Advantages of using CSS variables

1. The possibility of using CSS without CSS preprocessors (Less, Sass, etc.)

2. Quick development because of the re-using of code

3. The possibility of better upkeep – In every web application there is sometimes the need to adapt the visual aspect of the application to either new demands of users or to new trends. Although this involves what might seem to be minor changes (like changing to a different shade of a color in all elements using that color), such changes can require code changes in dozens or even hundreds of different places within the CSS document if they are made in standard CSS without using variables. If one uses variables, however, such changes can be done in just one place.

4. The possibility of quick and ad-hoc changes

5. The possibility of access and manipulation with JavaScript

6. The possibility of defining variables within any selector in order to set or bridge the current value of that selector.

Disadvantages of using CSS variables

1. Browser support

Along with all of these advantages of CSS variables, frontend developers will continue to use CSS preprocessors (at least for the time being) because of the rest of the benefits that CSS preprocessors offer – such as compilation in standard CSS without fear of browser compatibility or modularity problems – and simply because less code = faster development.

Like all developers, I am hopeful about enhancing the possibilities of native CSS with the possibilities of preprocessors, and CSS variables are a significant step in that direction.