Most of the time IMHO if you're dicking around setting CSS from the JavaScript, you're doing something WRONG. It is no more a good practice than the idiocy of <style> or style="" in the markup, as i all but a few corner-cases of fixes all you are doing is violating having proper separation of concerns.

But then CSS variables, much like the mind-numbingly dumbass trash that are CSS pre-processors -- continue to strike me as the type of "tools" for people who have no business writing HTML, much less CSS.

I say this because every time I see it used, it's mostly been for people using half a megabyte of CSS to do 48k or less' job. LESS/SASS/SCSS are crutches for people who actually need to back the blazes away from the keyboard and not come back until they've learned to use HTML and CSS properly.

"CSS in JS" is something one should rarely need unless you're manually adding a whole sheet for something scripting only used at load. JS needing to access the values in the stylesheet should be even rarer than that and not something I'd ever encourage people to get in the habit of doing.

MAYBE in something like Electron it might make sense, but if this were done on a normal website, well... no. Just... stop.