CSS Variables (Custom Properties)

Discover the power of CSS Custom Properties, also known as CSS Variables, in modern browsers. These variables allow you to write better CSS by centralizing the values and reducing repetition and inconsistencies. One unique feature of CSS Variables is the ability to access and change their values programmatically using JavaScript.

Introduction

In recent years, CSS preprocessors like Less and SASS have gained popularity for their ability to nest selectors, provide easy imports, and introduce variables. However, modern CSS now includes a powerful feature called CSS Custom Properties, or CSS Variables. While CSS is primarily a declarative syntax for styling HTML, CSS Variables help address the need for variables in CSS.

The basics of using variables

CSS Variables are defined by prefixing a name with two dashes (--variable-name) and assigning it a value. For example:

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

To use the variable value, you can use the var() function:

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

The value of a CSS Variable can be any valid CSS value. For example:

:root {
  --default-padding: 30px 30px 20px 20px;
  --default-color: red;
  --default-background: #fff;
}

Create variables inside any element

CSS Variables can be defined within any element. For example:

:root {
  --default-color: red;
}

body {
  --default-color: red;
}

main {
  --default-color: red;
}

p {
  --default-color: red;
}

span {
  --default-color: red;
}

a:hover {
  --default-color: red;
}

The scope of a variable depends on where it is defined.

Variables scope

When variables are added to a selector, they become available to all the children of that selector. The :root pseudo-class is commonly used to define CSS Variables and points to the root element of a tree. For HTML documents, :root refers to the html element with higher specificity than html.

To limit the scope of a variable to only the children of a specific element, you can define it within that element:

.container {
  --secondary-color: yellow;
}

Reassigning a CSS Variable within different scopes will override its value accordingly. You can also assign or overwrite a variable inline using inline styles:

<main style="--primary-color: orange;">
  <!-- ... -->
</main>

Interacting with a CSS Variable value using JavaScript

One of the most exciting features of CSS Variables is the ability to access and modify them programmatically using JavaScript. To set a variable value dynamically, you can use the setProperty() method:

const element = document.getElementById('my-element');
element.style.setProperty('--variable-name', 'a-value');

To retrieve the value of a variable defined on :root, you can use the getComputedStyle() function:

const styles = getComputedStyle(document.documentElement);
const value = String(styles.getPropertyValue('--variable-name')).trim();

To get the value of a variable applied to a specific element, you can use:

const element = document.getElementById('my-element');
const styles = getComputedStyle(element);
const value = String(styles.getPropertyValue('--variable-name')).trim();

Handling invalid values

If a variable is assigned to a property that does not accept that variable value, it is considered invalid and ignored. For example, passing a pixel value to a position property or a rem value to a color property would be invalid.

Browser support

CSS Variables have excellent browser support, making them widely accessible in modern browsers. However, if you need to support older browsers like Internet Explorer or older versions of other browsers, you may need to use libraries like PostCSS or Myth. Keep in mind that using these libraries will limit your ability to interact with variables programmatically.

CSS Variables are case sensitive

CSS Variables are case-sensitive. Therefore, --width: 100px; is different from --Width: 100px;.

Math in CSS Variables

To perform calculations with CSS Variables, you can use the calc() function. For example:

:root {
  --default-left-padding: calc(10px * 2);
}

Media queries with CSS Variables

CSS Variables can be used within media queries just like any other CSS property. For example:

body {
  --width: 500px;
}

@media screen and (min-width: 700px) and (max-width: 1000px) {
  --width: 800px;
}

.container {
  width: var(--width);
}

Setting a fallback value for var()

The var() function accepts a second parameter, which is a fallback value to be used when the variable value is not set. For example:

.container {
  margin: var(--default-margin, 30px);
}