CSS Custom Properties (Variables)

15/08/2020 2 min read
html
css
JS

CSS Custom Properties or CSS variables allow us to declare variables in our CSS files and use them inside our scope of choice. In this post I will go over some basic use cases for CSS custom properties and finish with an example that combines CSS custom properties and HTML custom attributes. 

Declare

A CSS variable is made out of a property name and value:

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

Be sure to use the -- prefix before the property name.

Scope

Declaring CSS custom properties on the pseudo :root class is considered a best practice. But you can also declare and use custom properties inside an element of your choice:

:root {
  --gallery-grid-columns: 3;
  --gallery-grid-gap: 15px;
}

.container {
  --primary-color: dodgerblue;
}

The var() Function

In order to use a CSS custom property we have to use the CSS var() function:

:root {
  --gallery-grid-columns: 3;
  --gallery-grid-gap: 15px;
}

#gallery-container {
  margin: auto;
  display: grid;
  grid-template-columns: repeat(var(--gallery-grid-columns), 1fr);
  grid-gap: var(--gallery-grid-gap);
  padding: 15px;
}

.container {
  --primary-color: dodgerblue;
}

.container p {
  color: var(--primary-color);
}

A Quick Example

My favorite use for CSS custom properties is using JS to manipulate them. I’ve created a pen with a working example that combines CSS custom properties, HTML custom attributes and js:

See the Pen Tester by Yossi Abramov (@yossi_abramov) on CodePen.

Related Posts