Псевдокласс :root и работа с ним

Сегодня случайно наткнулся на примеры работы с псевдоклассом :root. Сфера применения достаточно широкая. Хотелось бы услышать мнение тех, кто пользовался или пользуется. Реальный опыт эксплуатации, а не статейный материал. Подойдет ли для персонализации проекта, выбора основного цвета, фона и т.д.? Как дела с валидацией, скоростью и прочим? Можно ли сократить количество стилей с его помощью?
Это просто пример:
:root { --main-color: #9BC53D; --secondary-color: #EBFFFA; } body { margin: 0; padding: 0; } div { position: absolute; display: flex; justify-content: center; align-items: center; right: 20%; top: 20%; left: 20%; bottom: 20%; text-align: center; background: var(--main-color); color: var(--secondary-color); }

I am an example!

Больше примеров можно найти тут

Ответ

:root не делает ничего интересного. Его фишка в том, что он может ссылаться на любой корневой элемент. В HTML-файле это будет html, в SVG-файле svg, в XML-файле любой его корневой элемент.
Но ведь мы обычно пишем стили для HTML (ну или для SVG) и мы точно знаем, какой тег у нас корневой. Вот честно, мне сложно представить, чтобы мы один и тот же CSS-файл подключали одновременно к HTML и к SVG, да ещё и хотели одинаковые стили применить к их корневым элементам (но если всё-таки да, то этот псевдокласс для вас!).
Так что считаю, что его вполне можно заменить селектором по тегу.
Ну а если стилизуются разные XML'ки, то он вполне может быть полезен. Хотя лично я на практике не встречал необходимости стилизовать XML.