Michael Richins

Full-Stack Designer

Oct 28, 2016

I believe that native CSS variables are going to revolutionize the styling industry. The only thing holding us back is IE and Edge. We must accept that IE 11 will never support them, and Windows has stated that IE 11 will be around for as long as they support Windows 10.

"Internet Explorer 11 is the last version of Internet Explorer, and will continue to receive security updates, compatibility fixes, and technical support on Windows 7, Windows 8.1, and Windows 10."

I also believe that CSS preprocessors like SCSS, Less, and Stylus are going to continue to exist as well. Mainly because of functions, mixins, and partials. However, there is no need to fret, because preprocessors can still use native CSS variables. I created a quick Codepen illustrating the uses of CSS variables. If you have a 4K monitor without scaling, you'll be able to see the desired effect. The fantastic thing about CSS variables is that they are compiled at runtime. That means that if you change a CSS variable in JavaScript, it'll cascade in real-time.

Here is another fun Codepen that uses RxJS, RxCSS, and native CSS variables.

Magalie Linda

html/css stickler

Oct 29, 2016

What is your view on the workflow for this? I love your code in codepen, but all i see is a shift horizontally and not upwards. A change on runtime practially means to me, change the stylesheet.css (which could quite likely mean a very long file). So if you don't do this with a good strategy - you will change many elements which might not all need change. Then how is that different to using regular variables in sass.

@magalielinda, I still don't believe that they're supported enough to use in production, and I don't believe that there is a solid method of implementing CSS variables into any pre-processor.

What I mean by run-time changes, is that the CSS variables are stored in memory. It will only read the stylesheet once and every time the variable is changed in JavaScript, it only changes the reference and doesn't rewrite the CSS file.

Imagine you have a website that the main color scheme is controlled by the user. To maintain the separation of concerns between HTML, JavaScript, and CSS, you'd be better off setting a CSS variable in the stylesheet that the whole scheme was built upon, and only let JavaScript change that one color value. The whole stylesheet would reflect that change at run-time, not compile time. Mainly because the browser cannot write to the CSS file and change it. You don't have to have separate stylesheets for each set color theme, they could literally pick any color.

I hope this makes sense.

Search Hashnode