I use jss at work, from my perspective there is simply no use for css variables in any css-in js implementation. As we are using css-in-JS to avoid using css at all.
they make many things far easier to do avoiding typical specificity issues
I cannot see how css variables will allow to avoid these issues. Can you provide an example?
Also keep in mind that 6% is still pretty high. Do you think that any company will be happy to have 6% reduce in profit just to use css variables?
#ActuallyAutistic web dev. Does front of the front-end. Loves perf and minimalism. Prefers HTML, CSS, Web Standards over JS, UX over DX. Hates div disease.
The less than 6% can be targetted using a polyfill, and it is efficient enough to not slow down IE11 at all.
As for going for an example, how would you solve context sensitive focus color? Say regular blue when focused element is on a light background, light blue when on dark background, and a special case of white when on colored background that isn't light or dark.
Preferably I would like to see a solution where I don't need to tell indivually to each component what their focus color should be, because that is so prone to mistakes (forgetting). But when not doing directly to an element a naive solution easily has problems with nested elements as selector specificity becomes a problem.
The CSS variables solution for this is very simple.
Well the context is solved... with context in React. You can do as much with it as with css variables. I cannot say for styled-components but with jss it is a regular thing to do what you've described. See theming in react-jss (it's also very simple). Or you can simply pass it from component props if you need single component solution.
The biggest problem with css variables is that code can become undebbugable. When you pass context or prop you crearly see from where it's coming. Also where are you planning to define css varibles? In css files? Well, projects that use css-in-js do not have those. In JS? Then it's just better with context or props.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I use jss at work, from my perspective there is simply no use for css variables in any css-in js implementation. As we are using css-in-JS to avoid using css at all.
I cannot see how css variables will allow to avoid these issues. Can you provide an example?
Also keep in mind that 6% is still pretty high. Do you think that any company will be happy to have 6% reduce in profit just to use css variables?
The less than 6% can be targetted using a polyfill, and it is efficient enough to not slow down IE11 at all.
As for going for an example, how would you solve context sensitive focus color? Say regular blue when focused element is on a light background, light blue when on dark background, and a special case of white when on colored background that isn't light or dark.
Preferably I would like to see a solution where I don't need to tell indivually to each component what their focus color should be, because that is so prone to mistakes (forgetting). But when not doing directly to an element a naive solution easily has problems with nested elements as selector specificity becomes a problem.
The CSS variables solution for this is very simple.
Well the context is solved... with context in React. You can do as much with it as with css variables. I cannot say for styled-components but with jss it is a regular thing to do what you've described. See theming in react-jss (it's also very simple). Or you can simply pass it from component props if you need single component solution.
The biggest problem with css variables is that code can become undebbugable. When you pass context or prop you crearly see from where it's coming. Also where are you planning to define css varibles? In css files? Well, projects that use css-in-js do not have those. In JS? Then it's just better with context or props.