В чем смысл псевдокласса ":root"?

:root — это псевдокласс CSS, который соответствует корневому элементу документа, в HTML это всегда <html>. Его основное назначение заключается в определении глобальных CSS-переменных и применении стилей ко всему документу с наивысшей специфичностью, что позволяет легко управлять ключевыми параметрами дизайна.

Псевдокласс :root в CSS нацелен на корневой элемент документа. В контексте HTML-документов это всегда элемент <html>. Этот псевдокласс предоставляет удобный способ для определения глобальных стилей и пользовательских CSS-переменных, доступных по всему документу, что упрощает централизованное управление дизайном.

Наиболее распространенное использование :root — это объявление CSS-переменных (кастомных свойств). Эти переменные можно затем использовать в любом месте таблицы стилей, обеспечивая гибкость и консистентность в дизайне. Пример:

В этом примере --primary-color и --font-size-base определяются глобально в :root. Любой элемент в документе может получить к ним доступ через функцию var(). Это особенно полезно для тем оформления, где нужно быстро изменить цветовую палитру или размер шрифта во всем проекте.