CSS変数やカスケード変数とも呼ばれることもあるカスタムプロパティ。
変数のように使えるので何かと便利です。

カスタムプロパティはハイフン2つで始まる名前とプロパティ値を設定します。

基本的な文法はこのようになります。

element {
    --main-bg-color: brown;
}

よく使われる方法はカスタムプロパティを:root擬似クラスで定義することで、HTML全体で使用することが可能になります。

:root {
    --main-bg-color: brown;
}

カスタムプロパティの名前は大文字小文字が区別されます。

実際に使用するときはこのようになります。

element {
    background-color: var(--main-bg-color);
}

また、指定された変数が定義されていない場合の代替値を指定することができます。

element {
    background-color: var(--main-bg-color, black);
    /* --main-bg-colorが定義されていなければblack */
}

カスタムプロパティを活用すれば共通で設定するようなプロパティで使用し、デザイン変更等の効率を上げることができます。
例えば色指定関係をまとめておけば、変更したいときに全て書き換えるという手間が省けますね。