CSS Variables

[hungle00]

CSS Variables (or CSS Custom Properties) are CSS properties that are prefixed with --, like --example-name, and contain a value that can be used in other declarations using the var() function.

CSS Variables can be accessed using the var() function (e.g., color: var(--main-color)). In the above snippet, the var() function has --base-color passed as an argument. If --base-color is defined, then var() will return the value.

// define
--base-color: #ff0000;
// read and reassign
color: var(--base-color);
--new-base-color: var(--base-color);

To make use of inheritance, CSS variables are often defined in the :root element.

:root is a pseudo-class selector that matches the root element of the document, usually the html element. By creating our variables in :root, they will be available globally and can be accessed from any other selector in the style sheet.

Note: Custom property names are case sensitive — --my-color will be treated as a separate custom property to --My-color

In use

The Traditional Way

.div1 {
    backgroud-color: #084c61;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.div2 {
    backgroud-color: #084c61;
}

.text1 {
    color: #4b5563
    ...
}

Use CSS Variables

:root {
    --bg-primary: #084c61;
    --content-text-color: #4b5563;
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.div1 {
    backgroud-color: var(--bg-primary);
    box-shadow: var(--shadow-md);
}

.div2 {
    backgroud-color: var(--bg-primary);
}

.text1 {
    color: var(--content-text-color);
    ...
}

Advantages of using CSS Variables:

Make code more DRY

Some websites can have very large amounts of CSS, often with a lot of repeated values. For example, the same color might be used in hundreds of different places, requiring global search and replace if that color needs to change. Instead of copy and paste value for each CSS selectors over and over again, we can place them in variables.
In example1, to change background color for .div1 and .div2, we just need to change the --bg-primary.

An additional benefit is semantic identifiers. For example, --content-text-color is easier to understand than #4b5563, especially if this same color is also used in other contexts.

Systematize UI designing

Steve Schoger, in his book Refactor UI give some advice:

Instead of hand-picking values from a limitless pool any time you need to make a decision, start with a smaller set of options.
Don’t reach for the color picker every time you need to pick a new shade of blue — choose from a set of 8-10 shades
picked out ahead of time.

Using CSS variables, We can pick the initial values once instead of every time you’re designing a new piece of UI. We need systems for things like:

• Font size
• Font weight
• Line height
• Color
• Margin
• Padding
• Shadow
• ...

References

• MDN https://developer.mozilla.org/en-US/docs/Web/CSS/--*
• Steve Schoger & Adam Wathan's Refactoring UI book: https://www.refactoringui.com/