CSS-переменные позволяют уменьшить объём кода за счёт повторного использования значений в таблицах стилей. 2

Некоторые преимущества такого подхода:

• Упрощение обновления кода. 4 После объявления переменной можно многократно использовать определённое стилевое оформление без необходимости обновлять каждый элемент вручную. 4
• Сокращение числа повторений. 4 Когда кодовая база растёт и появляется много подобных классов и элементов, вместо того, чтобы писать код CSS для каждого из них, можно использовать переменные. 4
• Улучшение читаемости. 4 Использование переменных CSS позволяет создать компактную и читаемую кодовую базу. 4
• Упрощение поддержания единого стиля. 4 Например, можно объявить поля, отступы, стиль шрифта и цвета, которые будут использоваться в кнопках на веб-сайте. 4

Чтобы использовать переменные CSS, нужно определить их с помощью префикса --, за которым следует выбранное имя, а затем присвоить значение с помощью функции var(). 2