自定属性的概念：搭建CSS的新生态圈
2024-01-26 14:29:55
现在 CSS 新特性层出不穷，比如 Flex，CSS Grid 等等，我们是不是也可以按照这个思路使用，而不是借助预处理工具呢？
自定属性可以很好地构建CSS，可以搭建一套自己的样式，还可以实现自定义主题。
CSS 的自定属性（Custom Properties），被很多翻译成 CSS 变量。但这里有个微妙之处，称之为“变量”并不准确。
因为在 CSS 中，变量是仅仅用来方便开发的一个工具。你修改变量，变量之后引用的所有值都随之修改，但你的 CSS 代码仍旧是不会有任何变化的。当我们需要修改某个值，比如我们修改了一个颜色值，随后我们去寻找引用的地方，这让我们觉得，我们能够直观、明了的去修改我们需要的代码。
但同样的逻辑换到 CSS 自定属性上，性质上是有区别的。修改 CSS 自定属性，比如你修改了颜色，所有的引用都会被修改，但是你的 CSS 自定属性本身也随之而改变了。
这就造成了，我们并不能使用代码层面上的编辑器来找寻依赖某一个变量的地方，只能通过其作用于 HTML 层面的属性值去寻找。
那么 CSS 自定属性应该怎样利用？
我们先看一下传统实现方式和使用 CSS 自定属性的实现方式。
/* 通过类来实现 */
.error-message {
color: #ff0000;
background-color: #ffc0cb;
}
.success-message {
color: #008000;
background-color: #98fb98;
}
/* 通过 CSS 自定属性实现 */
:root {
--error-color: #ff0000;
--error-bg-color: #ffc0cb;
--success-color: #008000;
--success-bg-color: #98fb98;
}
.error-message {
color: var(--error-color);
background-color: var(--error-bg-color);
}
.success-message {
color: var(--success-color);
background-color: var(--success-bg-color);
}
从上面两个例子可以看出，通过 CSS 自定属性实现的方式相较于传统的实现方式，CSS 自定属性实现可以让我们的样式代码非常清晰、易维护。
我们来举一个更贴近实际的例子，如果你有一个项目，使用了一套 CSS 样式，样式的颜色主要包含红色和蓝色。
这个时候，你突然要将红色变成绿色，那么传统的方式，你就要去成百上千行代码中去找寻到所有的红色，然后把它们都换成绿色，这是一件繁杂且容易出错的事情。
但如果你使用 CSS 自定属性，你只需要将红色相关的自定属性修改成绿色，那么所有使用到了该自定属性的地方都会自动变成绿色，简单高效。
那么，该如何使用 CSS 自定属性？
- 在 :root 中声明自定义属性，例如：
:root {
--primary-color: #4285f4;
--secondary-color: #808080;
--background-color: #ffffff;
}
- 在需要使用自定义属性的地方，使用 var() 函数，例如：
body {
background-color: var(--background-color);
}
h1 {
color: var(--primary-color);
}
a {
color: var(--secondary-color);
}
- 可以通过 JavaScript 来修改自定义属性的值，例如：
document.documentElement.style.setProperty('--primary-color', '#ff0000');
通过以上，我们就可以完成 CSS 自定属性的设置及使用了。
CSS 自定属性能够轻松地更换主题，并且能够很好地组织我们的样式，提升代码的可读性和可维护性，另外 CSS 自定属性还有着兼容性好、使用简单等优点。
无论你的项目规模多大，使用 CSS 自定属性都是一个明智的选择。
希望这篇文章对您有所帮助。
