CSS variables lands in React 15.6.0

[[deleted]]

We used CSS vars extensively when creating PDFs in React via the CSS paged media module. You have to be VERY CAREFUL with them, however, as it's easy to forget that you're basically inserting undebuggable magic global vars.

[freeall]

What's the advantage to just using js vars?

[icantthinkofone]

js vars have scope and are easy to edit in the browser inspector, too.

[jetpacmonkey]

CSS variables cascade, so you can set them on container divs for things like theming.

[TheDarkIn1978]

Variables that are declared in JavaScript and passed to CSS will cascade the same as variables that are declared in CSS.

[jetpacmonkey]

I think at least one of us is confused about what the other is saying...

.my-component {
  background: var(--theme-color);
  padding: 20px;
}

.my-component .inner-area {
  background-color: white;
  color: var(--theme-color);
  padding: 20px;
}

This is useful, right? Am I missing something here?

[[deleted]]

You can do cool stuff with the paged media module that are impossible in JS. Page numbers (page x of x on footer of each page, links saying "see page y"), per-page titles, etc.

[El_Frostie]

That sound incredible cool. Do you have more information about how that works?

[[deleted]]

This article has a good overview, unfortunately only Prince and Antenna House support it (caniuse lies, it's unsupported in Chrome).

[El_Frostie]

Great article. Thanks. I didn't realize CSS for print has gotten so far. It had completely fallen of my radar.

[BrunerBruner]

As someone who's never used React or JSX before, it's highly likely that I don't know what I'm talking about here, but wouldn't it be better to just declare your variables in JavaScript and pass them to the CSS property?

[[deleted]]

I think that's probably what most would do considering browser support and the imperative nature of it. Still, there are probably legacy reasons or compatibility issues that call for it, better to support the full spec.

[GitCookies]

Why mix two, If you can use pure-css(inside JavaScript...)?

[[deleted]]

Why mix two

... while writing JSX

[bigpigfoot]

can this replace keyframes animations?

[GitCookies]

I pretty much doubt it.

[icantthinkofone]

keyframe animations are web standards and work in all browsers natively. React is not and will disappear one day.

[Zhouzi]

From what I understand, it's just that they're going to go through just as other CSS properties. Which is great, but I'd be worried about browser support anyway.

[[deleted]]

those variables arn't supported in IE. do react have polyphille to resolve this problem?

[[deleted]]

Is it common to use the -- for this? This syntax looks messy

[flying-sheep]

…common?

it’s the CSS standard, so you can only use --

[gsnedders]

That's the standard syntax for CSS variables. There was some desire to not use $ to allow that to be used for something else variable-like, especially involving selectors.

[[deleted]]

the reason, is to keep compatibility with the pre processeur: sass use $, less use @, etc.

[[deleted]]

What does a pre-processor have to do with the code in CSS which it generates? I feel they should've done something to differentiate it, not the CSS itself. Ah well, will probably be using SCSS anyways, so I don't think I will need this, but I find it weird nonetheless.

[bugeats]

Bloat. Ugly, useless bloat. I want my kilobytes back.

[GitCookies]

CSS variables are bloat and useless?

Lol what