Изучаем переменные в CSS на практическом примере

[WBuilder]

Вы обогатили мои знания о CSS, благодарю!
P.S. Не сарказм, про :root действительно не знал, CSS изучал давно и использую его крайне эпизодически.

[ekniazev]

Можно немного облегчить CSS, добавив, помимо переменных для каждой планеты, общие. Например:

--shadow-layer: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black;

И тогда для каждой планеты будет общий слой с тенью, а рядом — с ее собственным цветом:

box-shadow: var(--shadow-layer), -5px 0px 10px -4px var(--earth-color);

[i360u]

Пользовательские свойства CSS также поддерживают значения по умолчанию, о чем стоит упомянуть. Например:

var(--color, #000)

[deamondz]

Мне кажется, вы не полностью передали суть переменных; в вашем примере они решают только проблему нахождения определённого параметра в коде путём вынесения в рут. Эту идею можно было бы продолжить, решив так же проблему повторяющегося кода, внеся сами свойства css в соотвествующие классы, а изменять только сами переменные: codepen.io/deamondz/pen/qBdrVxw