FRESH

Hacker News

It is ok to say "CSS variables" instead of "custom properties"

95 points by eustoria

by nashashmi

5 subcomments

Looking at example 5:
```
  :root { --color: blue; }
  div { --color: green; }
  #alert { --color: red; }
  * { color: var(--color); }

  <p>I inherited blue from the root element!</p>
  <div>I got green set directly on me!</div>
  <div id='alert'>
    While I got red set directly on me!
    <p>I’m red too, because of inheritance!</p>
  </div>
```
Excuse my negativity, but this is messed up. I am trying to rationalize whyyyy???.
It seems every object is given variables (--abc). And then there are global variables and local variables. I guess this is the "cascading" feature. var is a function computed at the time of instantiation. And refers to local variables first. Then looks at global variable. Inheritance comes from ?? The p tag seems it is not root so therefore it is not blue.
Having explained it, I think about it better, but this really messes up how I thought of CSS. CSS is where the second stanza overwrites the first stanza. Yet global and local variables really hurts my head. A few complex CSS files later, it is bound to be unusable to determine result without getting a computer program to help.

by marcosdumay

1 subcomments

The idea of naming the stuff you use with a "var" keyword as "properties" is really bad.

by o11c

2 subcomments

Do CSS variables let you count arbitrarily-deep nesting levels? That is, can a rule for `x` defined a variable that matches the number in the immediate text here?
```
  <x>1<x>2<x>3</x></x></x>
```

by cantSpellSober

0 subcomment

and the name of the function we use to access them is var()! Not customProperty().

by ayaros

4 subcomments

I've just been calling them that anyway since I found out they existed.
Also, this guy is calling HTML a programming language. Make of that what you will...

by trvz

10 subcomments

The happiest software developers are those who write HTML, CSS, PHP, and just a sprinkle of JS like they used to do 20 years ago.

by afavour

1 subcomments

CSS variables = custom properties
Web components = custom elements
:shrug:

by brazukadev

1 subcomments

The same for Web Components (in place of Custom Elements).