在图解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中写样式有很多种方式，前段时间《React中编写CSS的姿势》一文有专门介绍过，感兴趣的同学可以看看。

不管是哪种方式，都有其利弊，这里不会和大家深聊他们之间的差异，主要和大家一起探讨CSS自定义属性如何使我们的工作流得到进一步的改善。并且探讨自定义属性在React和Vue框架构建组件时怎么使用。

很多Web开发者都这么认为：

不需要CSS中的变量(自定义属性)，因为可以使用JavaScript做完所有事情。

事实上，在使用框架开发组件时，使用CSS自定义属性有两个主要原因：

人体工程学很好

它开启了新的可能性，可以使用CSS自定义属性做一些JavaScript做不到的事情

既然如此，那我们就开始吧。

快速回顾CSS自定义属性

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中，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自定义的优势。下面这个示例，可以向你展示它的优势。我们在上例的基础上，复制另一个卡片出来，但我们期望的主题色不一样：

就上面的示例而言，我们没有做太多的调整，只是将卡片放在不同的两个容器中：

在.dark卡片上，只是调整重新定义一份自定义属性的值：

.dark {

--color: #fff;

--primary-color: #1a1515;

--body-bg-color: #1a1818;

--card-box-shadow-color: #6a716e;

--btn-bg