
CSS Custom Properties are supported in React since version 15.6.0 - Liriel
https://twitter.com/malyw/status/884191703493742592
======
davnicwil
Interesting. What use case does this have for css-in-js though?

Css variables are basically just globals, referenced with string names. Seems
like a very bad idea when you can use scoped, typed/linted JS instead. I can
think of one potential use case: referencing css variables from external
stylesheets, but again.. seems like a very bad idea.

~~~
tehbeard
CSS variables aren't globals. They cascade the same way as properties like
color, font-size etc.
([https://jsfiddle.net/3nkdvLud/2/](https://jsfiddle.net/3nkdvLud/2/))

It seems a saner way to push style values down into child components than
having to pass such values by alternate props and integrating them later on.

~~~
davnicwil
Fair point, I was imprecise with my use of the term global - you're right that
they have scope in that sense.

It just seems a lot more untraceable and confusing vis-a-vis using JS
variables to do the same. Regardless, using that pattern you're introducing
dependencies on a parent component in a child which generally indicates bad
design. The child component should usually not be an independent component at
all in this case, and if it is, passing those dependencies instead as props is
certainly the idiomatic React way to handle this situation.

~~~
noway421
I think with the devtools catching up, it would be possible to see those
variables and trace their values to what scope they originated from, similar
to how 'jump to location in css file' works. That would require being able to
compile to native css vs cssnext different targets though for dev and
production, which is not supported anywhere right now AFAIK (next.js/create-
react-app doesn't have it?)

Css classes are not necessarily components, but rather a set of classes can be
defined as component (like BEM advices to do, for example, where block,
element and modifiers compose a 'component'). Defining world-global css
variables can be useful too though, for example for colours, screen
resolutions and global text sizes.

~~~
pluma
CSS custom properties do however suffer from the same problems as CSS
selectors and HTML custom elements, especially the global namespace they use.

CSS custom property name conflicts will be just as painful as CSS class name
conflicts and HTML custom element name conflicts.

But luckily CSS-in-JS (aka CSS) libraries embracing them already seem to
handle them much like class names: an implementation detail you shouldn't
worry about so they'll just generate the names for you instead of forcing you
to keep track of them.

Of course this means the actual source for these variables will live in JS but
this is generally what you want anyway.

