Custom CSS properties already started with
var- in earlier spec drafts. But then the syntax has been changed to use the
-- prefix. AFAIK, one of purposes of this was to make custom properties somewhat more clear as a way for polyfilling and make the difference between static preprocessor variables and CSS variables (custom properties) more obvious. It’s also in line with future custom things like Custom media queries that are planned to use the same
But actually, exact prefix is not a problem at all.
The real problem with CSS custom properties as for polyfilling is that elements cannot be selected by custom property like
getElementsByStyleProperty('--foo'). So to write a polyfill, we need to enumerate ALL elements in the document and check value of specific property for each of them one by one.
Another problem with CSS custom properties is that they are inherited, and there is no way to determine whether specific property has been specified for specific element itself or for its ancestor. So when writing a polyfill, we are forced to ignore all descendants of elements that have the custom property though this wouldn’t necessarily be needed for the polyfilled thing itself.
So for polyfilling, it’s currently easier just to use a JS-powered CSS parser as if there were no CSS variables at all.