Variables in CSS: Type, Local, etc?

HTML-CSS
1

Hi,
I’m completing the Basic CSS lessons on variables, and I’m confused. My confusion is in comparing CSS variables to variables in other programming languages.

Question 1. How is variable type being determined? In the examples used for the penguin, we see:

--penguin-skin: black;

…what exactly is being stored? The text “black”? Or is the browser just intelligently deciding that penguin-skin will be a variable of type “color” or similar? How would I declare that variable without giving it a value? If I later define penguin-skin to be “0” or “rgb(0,0,0)” or “fred jones” will CSS just say “okay, sure, we’ll change the type!”?

Question 2. How does CSS know the domain of a variable… i.e. how local or private it is?

In the examples in the lesson, the variable is declared inside of a class definition early in the block… and then other class definitions, further down, use that variable! This seems bonkers to me… is any variable I define, anywhere, instantly global? Does it go backwards and forwards, or just as you read down the styles? It feels really weird to call CSS classes classes.

Thanks for your thoughts,
D

2

…what exactly is being stored? The text “black”?

Basically, yes. CSS Variables are fairly limited, and (i’m almost certain) are pre-processor directives. Wherever var(–penguin-skin) is found in the text file, it is replaced with “black” before being fed to the browser’s layout engine.

According to MDN’s page on CSS Variables:

CSS variables are subject to the cascade and inherit their value from their parent.

And in the lesson which I think you’re referencing

--penguin-skin:gray is being defined on the outermost <div> element, so all its children divs inherent the ability to access that variable:

<div class="penguin">
  <div class="penguin-bottom">
    <div class="right-hand"></div>
    <div class="left-hand"></div>
    <div class="right-feet"></div>
    <div class="left-feet"></div>
  </div>
  <div class="penguin-top">
    <div class="right-cheek"></div>
    <div class="left-cheek"></div>
    <div class="belly"></div>
    <div class="right-eye">
      <div class="sparkle"></div>
    </div>
    <div class="left-eye">
      <div class="sparkle"></div>
    </div>
    <div class="blush-right"></div>
    <div class="blush-left"></div>
    <div class="beak-top"></div>
    <div class="beak-bottom"></div>
  </div>
</div>
1 Like
3

Okay-- this helped a lot. Specifically-- I’d been thinking of the block as a single pile of classes, and forgetting that those classes get called… or assigned, in the actual html code.

So the first, outermost

is sort of “loading up” the variables, so that any classes that are assigned INSIDE that
can freely use that variable.

Just to make sure I understand: If, after the above code example (and the final, closing

!), I had another div (or other element), and I assigned it the class “penguin-bottom”, it would fail (or use the fallback value, if available)? In other words, it is nesting within an element with an assigned class that defines the variable that gives the variable value, and afterwards the variable will not be valid again?
4

You’ve got it. Siblings on the DOM tree don’t inherit ANY of the (styles OR variables) that we assigned to a given element. Children inherit ALL of them, but may have declarations that override what was assigned to their (grand-)* parent element.

5

Thanks again.

I’ve copied your excellent quote (“Siblings on the DOM tree don’t inherit ANY of the (styles OR variables) that we assigned to a given element. Children inherit ALL of them, but may have declarations that override what was assigned to their (grand-)* parent element.”) into my notes.

1 Like