Naming When naming CSS variables, it contains only letters and dashes just like other CSS properties (eg: line-height, -moz-box-sizing) but it should start with double dashes (–)

//These are Invalids variable names
--123color: blue;
--#color: red;
--bg_color: yellow
--$width: 100px;

//Valid variable names
--color: red;
--bg-color: yellow
--width: 100px;

CSS Variables are case sensitive.

/* The variable names below are all different variables */
--pcolor: ;
--Pcolor: ;
--pColor: ;

Empty Vs Space

/* Invalid */
    --color:;

/* Valid */
  --color: ; /* space is assigned */

Concatenations

/* Invalid - CSS doesn't support concatenation*/
.logo{
    --logo-url: 'logo';
    background: url('assets/img/' var(--logo-url) '.png');
}

/* Invalid - CSS bug */
.logo{
    --logo-url: 'assets/img/logo.png';
    background: url(var(--logo-url));
}

/* Valid */
.logo{
    --logo-url: url('assets/img/logo.png');
    background: var(--logo-url);
}

Careful when using Units

/* Invalid */
--width: 10;
width: var(--width)px;

/* Valid */
--width: 10px;
width: var(--width);

/* Valid */
--width: 10;
width: calc(1px * var(--width)); /* multiply by 1 unit to convert */
width: calc(1em * var(--width));