关于CSS样式的全局统一管理的见解

我在自己的小项目开发中往往会去想一个问题，那就是这个页面的部分字体和另一页面的部分字体都用是同一种颜色，却得分别写color: #f3f3f3，于是我利用了var()函数的特性，完成全局通用样式管理：

:root {
    --default-font-color: #000;
}

.oneText {
    color: var(--default-font-color);
}

也可以将变量绑定在 body 上

body {
    --default-font-color: #000;
}

.oneText {
    color: var(--default-font-color);
}

也可以将变量绑定在 body 的 class 上

body .mode {
    --default-font-color: #000;
}

.oneText {
    color: var(--default-font-color);
}

这样写有个好处，比如你要换主题皮肤，直接用 js 修改 body 的 class，来达到此效果：

body .light-mode {
    --default-background-color: #fff;
}

body .dark-mode {
    --default-background-color: #000;
}

.oneText {
    color: var(--default-background-color);
}