DEV Community

Discussion on: How long until CSS variables will replace CSS-in-JS color enums?

Collapse
merri profile image
Vesa Piittinen Author

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.

Collapse
rtivital profile image
Vitaly Rtishchev

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.