CSS Variables in JavaScript

Demo to show how JS and CSS can interact in the future

HTML

<button id="make-wider" type="button">make wider</button>
  <div></div>

CSS

body {
  var-width: 40px;
  var-increment: 10;
}

div {
  width: var(width);
  height: 50px;
  background: blue;
}

JavaScript

/*
    "Abusing" CSS Variables for (arbitrary) configuration in CSS. 
    Allowing "separation of concerns"-workarounds for multiple problems.
    E.g. listing supposedly transitioned properties, tracking durations, etc.
    
    Attention: currently only works in Firefox Nightly!
 */

var button = document.getElementById('make-wider');
var style = document.body.style;
// working around a Firefox Nightly bug that only allows reading after setting:
style.setProperty('var-width', "100px");
style.setProperty('var-increment', "10");
button.addEventListener('click', function() {
  var width = style.getPropertyValue('var-width');
  var increment = style.getPropertyValue('var-increment');
  var incrementedWidth = parseInt(width) + parseInt(increment) + "px";
  style.setProperty('var-width', incrementedWidth);
});