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 {


  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. 🙂

About Sarah Maddox

Technical writer, author and blogger in Sydney

Posted on 11 November 2017, in ASTC, technical writing and tagged , , , . Bookmark the permalink. 1 Comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: