level up your styles with css variables

So, What are CSS Variables? #

CSS variables - otherwise known as custom properties - are specific values that can be reused throughout a document, similar to how variables are used in other programming languages. Let’s see a quick example and break the parts down.

Basic Usage #

:root {
  --primaryColour: hsla(4, 99%, 66%, 1);
  --backgroundColour: hsla(207, 100%, 96%, 1);
}

main {
  background-color: var(--backgroundColour);
}

h1 {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  letter-spacing: -0.5px;
  font-size: 3rem;
  color: var(--primaryColour);
  text-align: center;
}

There. Nice, quick example there - you can see this working below.

Now we’ve got that up, let’s see how this is put together, so let’s break this down.

Firstly, the :root pseudo-class being used at the top of the example? That represents the root of the document tree (typically the html element) and is used to define custom properties in a way that will allow them to be used globally across your site. Neat! They can be defined elsewhere, but let’s not go into that right now.

Second, CSS custom properties are always prefixed with a --. Similar to class names and IDs, there’s no specific naming convention, so the world is your oyster and there are lots of different opinions on the best way.

After setting up the custom properties in :root, they can then be used within any CSS selector by using them alongside the var() function, which is what is being shown in the background-color and color properties in the example above.

Fallbacks #

If a custom property has been set, but is actually invalid or just hasn’t been defined, for example, in both these cases;

:root {
  --primaryColour: hsla(4, 99%, 66%, 1);
  --backgroundColour: hsla(207, 100%, 96%, 1);
  --secondaryColour: hsla(155, 61%, 51%, 1);
  --secondaryBackgroundColour: hsla(343, 6%, 21%, 1);
}

h2 {
  color: var(--thisDoesntExist, lightgreen);
  background-color: var(--thisDoesntExist, black);
}

I’ve declared my secondaryColour and secondaryBackgroundColour in :root, but for my h2 element I’ve used a different custom property name (aptly titled “This Doesn’t Exist” for obvious reasons). Notice, that rather the function closing after --thisDoesntExist, another parameter is passed. That is our fallback colours.

Support? #

Support for CSS custom properties is excellent, you would have to be using a relatively old browser at this time of writing to not be able to use them.

Source: CanIUse

Context Changing #

One of the benefits of custom properties, is that they can be changed based on the context of the element it is assigned to.

In this example, the first h2 element we see uses the custom properties for color and background-color;

color: var(--changeColour, hotpink);
background-color: var(--changeBgColour, black);

But, they are not defined yet so they use the fallback colours instead. On the second h2 element, we then use the .add-styles class to define these custom properties of changeColour and changeBgColour, which in turn, allows this element to fullfil where they were originally being used, rather than using the fallback. Clever, eh? A great example I’ve seen of this is this post by Andy Bell, where it is being used within the prefers-color-scheme media query.

Using With Javascript #

In this example, inline custom properties are set to allow new values for the max-width and color properities. While max-width uses a fallback of 550px, the --maxWidth value is not passed anywhere in the stylesheet, allowing it to differ from the example in the previous section. With the value of the color property, it is not using a fallback, or a different custom property. Instead, it is overwriting the --primaryColour value with a new color, and using CSS specificity to allow for the color to be changed.

Conclusion #

CSS custom properties are a great way to keep your styles controlled and consistent (because who wants to rely on a Find and Replace when a new branding colour comes along), and allows for less CSS to be written overall.