CSS Variables – ASTC 2017

I’m attending the Technical Communicators Conference 2017, the annual conference of the Australian Society for Technical Communication (ASTC). This post is a live blog of a session at the conference. In other words, I’m writing as the presenter speaks. Any mistakes are mine, and all credit goes to the presenter.

He’s back! Dave Gash’s second session of the conference was CSS Variables: No, really! Dave said using CSS variables is easy. Let’s see whether he convinces me.

In the early history of CSS variables, there were some changes in implementation. The changes resulted in improvements, but not all browsers supported every version. Browser support for CSS variables has improved over the last year. It’s reached around 70-80% according to caniuse.com.

Why use variables in CSS? The benefits are the same as in other types of coding:

Ease of maintenance
Simplicity
Consistency

Declaring a CSS variable is the same as declaring any CSS selector, except that you need to add a double dash in front of the variable name. Examples:

--bqindents: 40px;

--warningtextsize: 125%;

It’s good practice to declare all your variables at the top of your page, using a :root selector. The :root selector gives the variables global scope. Use it like this:

:root {

--bqindents: 40px;

--warningtextsize: 125%;

}

To use the variable later in the CSS, you use the var function to retrieve the value of the variable. Example:

p.warning {

color:red;

font-size: var(--warningtextsize);

}

Dave ran through a number of best practices for using variables, and pre-emptively answered some FAQs. Then he walked us through some examples of where variables are useful. You can find some demos of CSS variables on Dave’s website. Dave has also written an article about them on Medium.

Thanks Dave, that was informative and fun. And yes, it does look kinda easy, now that you’ve shown it to us.