:root伪类用于定义全局CSS变量，如--primary-color、--font-size-base等，通过var()函数在样式中引用，结合JavaScript可动态修改，便于主题切换与维护，提升代码可读性与一致性，是现代前端推荐的样式管理方式。
:root 是一个CSS伪类，它匹配文档的根元素（在HTML中通常是 <html> 元素）。利用 :root 结合自定义属性（即CSS变量），我们可以定义全局可访问的样式变量，方便在整个项目中统一管理颜色、字体、间距等常用样式值。
使用 :root 定义全局CSS变量
在 :root 中定义的变量可以在整个CSS文件中的任何位置被引用，具有全局作用域。语法如下：
:root {--primary-color: #007bff;
--secondary-color: #6c757d;
--font-size-base: 16px;
--border-radius: 8px;
}
这些变量以两个连字符（--）开头，遵循CSS自定义属性的命名规则。
在样式中使用定义的变量
通过 var() 函数调用在 :root 中定义的变量：
立即学习“前端免费学习笔记（深入）”；
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
color: var(--primary-color);
font-size: var(--font-size-base);
}
.button {
background-color: var(--primary-color);
border-radius: var(--border-radius);
}
这样，只要变量值发生变化，所有引用该变量的样式都会自动更新，极大提升维护效率。
为什么推荐使用 :root 定义全局变量？
- 全局可访问：:root 处于CSS选择器的最顶层，其定义的变量可在整个文档中使用。
- 便于主题切换：结合JavaScript，可以动态修改 :root 中的变量值，实现夜间模式或主题切换。
- 提高代码可维护性：将设计规范集中管理，避免散落在各处的魔法值。
- 兼容现代浏览器：主流浏览器均支持CSS变量和 :root 伪类。
结合JavaScript动态修改变量
可以通过JavaScript获取并修改根元素上的CSS变量：
// 获取根元素const root = document.documentElement;
// 修改变量值
root.style.setProperty('--primary-color', '#ff5733');
这种能力非常适合实现用户自定义主题或响应式设计调整。
基本上就这些。使用 :root 定义全局CSS变量是一种清晰、高效、现代的样式管理方式，值得在项目中推广使用。不复杂但容易忽略。
