CSS Variables Pop Quiz Breakdown
Tags: css, beginners, codenewbie
Published: 2019-05-24 14:09:45

---
title: CSS Variables Pop Quiz Breakdown
published: true
description: Breakdown of a recent Twitter Quiz. 
tags: CSS, Beginner, CodeNewbie
cover_image: https://thepracticaldev.s3.amazonaws.com/i/aqbowgt10ssmuauh8k3j.png
---

# Intro
You may have seen this tweet making the rounds recently: 

{% twitter 1131626097349496833 %}

If you haven't yet, I encourage you guess what you think the answer will be before continuing on (and even vote on the tweet if the poll is still open! - But please don't vote after this post. Working on the honor system here). 
* Pink
* Blue
* Red

This is your final spoiler warning! 

---

# CSS Variables

If you're unfamiliar with CSS Variables, this code might look extra confusing to you. The TL;DR is that it allows you to assign a value to a variable, indicated by the `--` and then reference that value across your CSS style sheet. This provides the benefit of not needing to update each instance of the code, but only update a single location. 

```css
/* Variables are often declared in the root pseudo-class
to ensure they are available across the entire style sheet */
:root {
  --paddingVertical: 5px;
  --paddingHorizontal: 10px;
  --margin: 15px;
  --textColor: black;
}

/* Referencing variables */
.example{
  padding: var(--paddingVertical);
  padding: var(--paddingHorizontal);
  color: var(--textColor);
}

```

Codepen Example (Added border to the divs for emphasis): 
{% codepen https://codepen.io/Pichuplayer/pen/mYxxqN %}

For more details, check what [MDN docs have to say](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).

# The Solution

Now that we have CSS Variables out of the way (and are sufficiently below the fold), we can start looking at what's happening in the tweet's code (referred to as "the Quiz" from here on). 

The Quiz's code:
{% codepen https://codepen.io/Pichuplayer/pen/jozzNW %}


So the answer to the question is **red**. _But why?_

What's happening in the Quiz is that the CSS Variable `--myVar` is being overwritten and the last overwrite is the one that takes effect. You can see this in action by copying the span and adding it outside of the div with `class='red'`: 

{% codepen https://codepen.io/Pichuplayer/pen/PvRRXZ %}

Now we see that there is a red and blue "Hello World" being displayed. This is because the blue "Hello World" doesn't have the class which applies `--myVar: red` and as such uses the most recent assignment that it can find (set on `#blue`). 

# My Observations of the (current) results

As of the time of writing, the poll shows the following (1,454 votes): 
* pink - 37%
* blue - 18%
* red - 45%

**pink** - I believe the uses of CSS variables is tripping people up and leading to the votes for pink. We're told over and over that CSS read's top to bottom, which could lead to believing that because `--myVar: pink` is the closest to the bottom, that would mean pink is the value that `myVar` is set to for the entire document. 

**blue** - My initial explanation for the solution would be that it's a case of CSS Specificity (which after re-evaluating I'm not sure is the correct wording). I suspect that those choosing blue are either choosing what they perceive as the least likely answer because they think it is a trick question or evaluating that the id tag would take precedent over everything else (at least, that's what I used to think!)

You can read about CSS Specificity in these great posts by Emma and Muna: 

{% link https://dev.to/emmawedekind/css-specificity-1kca %}

{% link https://dev.to/munamohamed94/css-specificity-and-the-use-of-important-a-case-study--11 %}