3 ms·

The author lists all the ways CSS variables are better than preprocessor variables. But that is the same reason that the design is flawed. JavaScript has shown

The author lists all the ways CSS variables are better than preprocessor variables. But that is the same reason that the design is flawed. JavaScript has shown us the value of designing new features in a way that they can be polyfilled or emulated via a preprocessor, so that features can gain adoption without developers having to wait for older browsers to die. CSS variables were overdesigned in a way that makes this upgrade path impossible.

err4nt 11y ago
> JavaScript has shown us the value of designing new features in a way that they can be polyfilled or emulated via a preprocessor, so that features can gain adoption without developers having to wait for older browsers to die. Funny you should mention that, I have such a polyfill to introduce Element Query syntax to all browsers IE8 and up, and one of the features we just added was the ability to use variables in your CSS supplied from JavaScript running on the page. Demo: http://codepen.io/tomhodgins/pen/MKWOWW http://codepen.io/tomhodgins/pen/MKWOWW Oh, and we also added a $parent selector to CSS, just for giggles :) http://github.com/eqcss/eqcss http://github.com/eqcss/eqcss < it's under MIT so feel free to use it and build on it
philipwalton 11y ago
Polymer partially polyfills CSS Custom Properties: https://www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling-details https://www.polymer-project.org/1.0/docs/devguide/styling.ht... Also, for what it's worth, not all new JavaScript features are polyfill-able. Proxies, for example, are impossible to polyfill, should they not have been added? WeakMaps are also only partially polyfill-able, are they overdesigned too?
- underwater 11y ago
  I believe that where possible it makes sense to follow what is already happening in the wider open source ecosystem, rather than trying to design a solution from scratch. There is a huge demand for constants/variables in CSS, as well as a widespread use of preprocessors. The CSS variable spec does bring a lot of interesting ideas to the table, but it does so at the expense of ignoring how people are shipping code today. Designing a solution that can be dropped into an existing pipeline can be valuable even if doesn't introduce any new concepts or features. For example Promises in JS are pretty simple and just replicate the functionality of existing libraries, but they normalized existing patterns and made it possible to trust that third party code would have consistent behavior. That was a huge boost.

err4nt 11y ago

> JavaScript has shown us the value of designing new features in a way that they can be polyfilled or emulated via a preprocessor, so that features can gain adoption without developers having to wait for older browsers to die. Funny you should mention that, I have such a polyfill to introduce Element Query syntax to all browsers IE8 and up, and one of the features we just added was the ability to use variables in your CSS supplied from JavaScript running on the page. Demo: http://codepen.io/tomhodgins/pen/MKWOWW http://codepen.io/tomhodgins/pen/MKWOWW Oh, and we also added a $parent selector to CSS, just for giggles :) http://github.com/eqcss/eqcss http://github.com/eqcss/eqcss < it's under MIT so feel free to use it and build on it

philipwalton 11y ago

Polymer partially polyfills CSS Custom Properties: https://www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling-details https://www.polymer-project.org/1.0/docs/devguide/styling.ht... Also, for what it's worth, not all new JavaScript features are polyfill-able. Proxies, for example, are impossible to polyfill, should they not have been added? WeakMaps are also only partially polyfill-able, are they overdesigned too?

underwater 11y ago
I believe that where possible it makes sense to follow what is already happening in the wider open source ecosystem, rather than trying to design a solution from scratch. There is a huge demand for constants/variables in CSS, as well as a widespread use of preprocessors. The CSS variable spec does bring a lot of interesting ideas to the table, but it does so at the expense of ignoring how people are shipping code today. Designing a solution that can be dropped into an existing pipeline can be valuable even if doesn't introduce any new concepts or features. For example Promises in JS are pretty simple and just replicate the functionality of existing libraries, but they normalized existing patterns and made it possible to trust that third party code would have consistent behavior. That was a huge boost.