CSS自定义属性在组件开发中的使用
CSS自定义属性在组件开发中的使用
在图解CSS系列的《CSS自定义属性》一文中，对CSS的自定义属性做过深入的阐述。如果你阅读过这篇文章，应该对CSS自定义属性有所了解，也能体会到该特性的强大之处。今天，CSS自定义属性可以用于Web开发中的很多地方，能让开发者变得更为便捷灵活，比如最近流行的Dark Mode开发。而今天我们就来和大家聊聊CSS自定义属性在组件开发中的运用。
为什么要在组件开发中使用CSS自定义属性
对于Web开发者而言，组件开发已经有很多种模式，从传统的HTML和CSS模式到现代JavaScript框架（比如React，Vue）。不管是哪一种方式，都离不开CSS，而且只是CSS的使用方式不同而以。
如果你还在使用传统的组件开发模式，可能你更趋向于将CSS放在一个独立的.css文件中，并且将文件和组件放在一起：
而使用JavaScript框架开发时，可能会将CSS和模板都放在同一个.js（或.vue）文件中：
特别是使用React框架开发时，很多开发都都热衷于CSS-in-JS的模式。
不管是哪种方式，都有其利弊，这里不会和大家深聊他们之间的差异，主要和大家一起探讨CSS自定义属性如何使我们的工作流得到进一步的改善。并且探讨自定义属性在React和Vue框架构建组件时怎么使用。
很多Web开发者都这么认为：
事实上，在使用框架开发组件时，使用CSS自定义属性有两个主要原因：
- 人体工程学很好
- 它开启了新的可能性，可以使用CSS自定义属性做一些JavaScript做不到的事情
既然如此，那我们就开始吧。
快速回顾CSS自定义属性
这里我们只是快速回顾CSS自定义属性的基础知识。在使用CSS自定义属性时，一般会在:root中先声明CSS自定义属性：
:root {
--color-text: black;
--color-background: lightgray;
--color-primary: rebeccapurple;
--gutter: 16px;
}
然后在需要使用的地方，通过var()函数来调用已声明的自定义属性，通过var()函数调用的自定义属性会作为别的CSS属性的值，比如：
.element {
color: var(--color-text);
margin-bottom: var(--gutter);
}
.primary {
color: var(--color-primary);
}
它们看上去就像属性，事实上也是如此。通过--前缀声明的被称为属性，即CSS自定义属性；被var()函数调用的自定义属性（即--前缀声明的自定义属性）又被称为是CSS的变量。也可以说：
在CSS中，CSS自定义属性可以像其他CSS属性一样，可以运用于任何HTML元素上。也同样遵从CSS的使用规则。
使用CSS自定义属性构建Web组件
我想你对CSS自定义属性有一个基本的认识了，即使没有也不必着急，接下来我将一步一步带大家进入CSS自定义的事件。
下面我将拿一个常见的组件为例，向大家介绍CSS自定义属性在组件构建中的使用。比如我们要构建下面这样的一个卡片组件：
这个Demo并不复杂，上面示例也是我们传统的一种做法，一看代码便知道怎么回事。接下来，我将会使用CSS自定义属性来改造上面的卡片，为了节约时间，只将颜色部分换成CSS自定义属性描述。
正如上图所示，简单的分析卡片上各个元素使用到的颜色，大约有九个地方，共用了七种颜色，这样一来，我们显式的在:root中声明七个有关于颜色的自定义属性：
:root {
--primary-color: #ffffff; /* 主色 */
--body-bg-color: #f1f1f1; /* body背景颜色 */
--card-bg-color: var(--primary-color); /* card背景颜色 */
--card-box-shadow-color: #405070; /* card盒子阴影颜色 */
--btn-bg-color: #28c3f5; /* button背景颜色 */
--btn-color: var(--primary-color); /* button文本颜色 */
--paragraph-color: gray; /* 段落文本颜色 */
--card-object-bg-color: #eaeff8; /* card顶部背景颜色 */
--avatar-bg-color: var(--primary-color); /* 头像背景颜色 */
--title-color: #101c34; /* 标题2文本颜色 */
}
注意，自定义属性的名称可以根据自己的喜好来定义，但建议使用具有语义化的名称。
这样一来，我们上面的案例可以换成自定义属性，并且在运用到颜色的属性换成var()函数，引用已声明的自定义属性：
body {
background-color: var(--body-bg-color);
}
.card {
background: var(--card-bg-color);
box-shadow: 0px 1px 10px 1px var(--card-box-shadow-color);
}
.card__object {
background-color: var(--card-object-bg-color);
}
.card__avatar {
background-color: var(--avatar-bg-color);
}
.card__body {
background: var(--card-bg-color);
}
.card__body h4 {
color: var(--title-color);
}
.card__body p {
color: var(--paragraph-color);
}
.card__body .btn {
background: var(--btn-bg-color);
color: var(--btn-color);
}
.card__body .btn:hover {
color: var(--btn-bg-color);
}
你可能已经发现了，上面我们有的自定义属性嵌套了另一个自定义属性。在CSS自定义属性中，是不推荐这么用的。正如上例所示，在用到#ffffff颜色的地方，统一使用一个自定义属性，比如--primary-color。
就上面而言，你或许还没有发现CSS自定义的优势。下面这个示例，可以向你展示它的优势。我们在上例的基础上，复制另一个卡片出来，但我们期望的主题色不一样：
就上面的示例而言，我们没有做太多的调整，只是将卡片放在不同的两个容器中：
<!-- HTML -->
<div class="wrapper light">
<div class="card">...</div>
</div>
<div class="wrapper dark">
<div class="card">...</div>
</div>
在.dark卡片上，只是调整重新定义一份自定义属性的值：
.dark {
--color: #fff;
--primary-color: #1a1515;
--body-bg-color: #1a1818;
--card-box-shadow-color: #6a716e;
--btn-bg