过去一年来花了不少时间来研究CSS自定义属性相关的特性，而且在站上也发了多篇有关于CSS自定义属性相关的教程，其中有关于CSS自定义属性，也有涉猎CSS Houdini自定义属性相关的。但我想很多同学除了希望了解CSS自定义属性理论相关的知识之外还更想了解CSS自定义属性能做什么吧。在这篇文章中，我将整理一些有关于CSS自定义属性在实际开发中能做什么，并会在文章中提供相应的一些使用实际。希望能通过具体的实例帮助大家更好的理解和使用CSS自定义属性。

组件优化

Web组件（或者说UI组件）在Web中是最可见之一，使用CSS自定义属性可以让组件的代码变得更简单。拿Bootstrap的button举例：

.btn-primary的CSS代码如下：

.btn {
    color: #212529;
    background-color: transparent;
    border-color: transparent;
}

.btn:hover {
    color: #212529;
}

.btn:focus {
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}

.btn-primary {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.btn-primary:hover {
    color: #fff;
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

.btn-primary:focus {
    color: #fff;
    background-color: #0b5ed7;
    border-color: #0a58ca;
    box-shadow: 0 0 0 0.25rem rgba(49,132,253,.5);
}

.btn-primary:active {
    color: #fff;
    background-color: #0a58ca;
    border-color: #0a53be;
}

不难发现，button在默认状态，:active、:focus和:hover状态，变化的只是color、background-color、border-color和box-shadow等属性。如果我们换作CSS自定义属性来构建的话，代码会变得更简称：

root:{
    --btn-color: #212529;
    --btn-hover-color: #212529;
    --btn-bg-color: transparent;
    --btn-border-color: transparent;
    --btn-box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
    user-select: none;
    padding: .375rem .75rem;
    font-size: 1rem;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn:focus {
    outline: 0;
}

.btn {
    color: var(--btn-color);
    background-color: var(--btn-bg-color);
    border: 1px solid var(--btn-border-color);
}

.btn:hover {
    color: var(--btn-hover-color);
}

.btn:focus {
    box-shadow: 0 0 0 0.25rem var(--btn-box-shadow);
}

在不同状态，比如.btn-primary、.btn-secondary下只需要调整相应的自定义属性的值即可：

.btn-primary {
    --btn-color: #fff;
    --btn-bgcolor: #0a58ca;
    --btn-border-color: #0a58ca;
    --btn-box-shadow: rgba(49, 132, 253, 0.5);
    --btn-active-bgcolor: #0a58ca;
    --btn-active-border-color: #0a53be;
    --btn-hover-color: #fff;
    --btn-hover-bgcolor: #0b5ed7;
    --btn-hover-border-color: #0a58ca;
}

效果如下：

你可能已经发现了，在自定义属性的模式下，我们只需在相应的状态下调整自定义属性的值，不需要在代码中写CSS的属性：

使用CSS自定义属性，是不是比以前省事多了。这样做并不是说CSS自定义属性帮助开发者节约了多少代码或更易于维护，其真正的价值是：自定义属性让我们能够共享代码，让其他开发者可以重用或定制。比如说，我们可将一个button可变参数提取出来，并将这些参数设置为CSS自定义属性，那么就可以很好的调整（自定义地构建个性化）按钮的UI效果。

控制组件大小

在CSS Frameworks中很多组件都提供了相应的类名来控制组件大小，比如我们熟悉的Bootstrap中的按钮组件，有btn-lg、btn-sm类来调整组件的padding值，CSS Frameworks新起之秀Tailwindcss提供了更多类名来调整组件大小：

简单地说，通过调整组件的padding可以非常容易调整组件内距从而改变组件大小：

但往往影响组件大小并不仅仅是因为其 尺寸属性 （比如padding、width、height和font-size等）的设置，还和 属性取值的单位 也有紧密关系。比如，使用em单位，可以很好的调整组件组件大小：

与em相似的相对单位还有rem、vw、vh、vmin、vmax以及%。

而有了CSS自定义属性之后，我们可以更灵活的控制组件的大小：

正如上图所示，我们可以其于CSS自定义属性来调整font-size的值来改变组件大小，不过该方式有一个前提条件，那就是涉及到控制组件大小的属性（具有<length>的属性，比如width、padding等）应该使用em来做单位（rem勉强也行）。我们使用这些方法来构建上图这样的卡片组件。

实现该效果最为关键的是在html中设置了font-size值为%值，它相对于16px做计算，同时我们在.card上设置的font-size值是rem值，它相对于html的font-size计算，另外在侧边栏aside调整自定义属性--fs的值，从而影响其font-size值的大小：

:root {
    --fs: 1rem;
    --root-fs: 100%;
}

html {
    font-size: var(--root-fs);
}

.card {
    font-size: var(--fs);
}

aside {
    --fs: 0.65rem;
}

另一个要点是，组件上的元素属性的值单位采用的都是em为单位，而em又是相对于自己font-size值计算，如果元素自已并未显式设置font-size，则会继承其父元素（祖先元素）的font-size：

.card {
    max-width: 25em;
    box-shadow: 0 0 0.25em -0.15em rgba(255, 255, 255, 0.65);
    border-radius: 0.25em;
    border: 0.025em solid rgba(255, 255, 255, 0.65);
}
.card__thumbnail {
    border-radius: 0.275em 0.275em 0 0;
    overflow: hidden;
}

.card__thumbnail img {
    border-radius: 0.275em 0.275em 0 0;
}

.card__body {
    font-size: 1.125em;
    padding: 1em 1.25em;
}

.card__title {
    font-size: 1.5em;
    margin: 0 0 0.5em;
}

.card__content {
    font-size: 1.025em;
}

.card__footer {
    padding: 0.6em 1.25em 1.2em;
}

如果你未接触过值和单位之间的计算关系，建议你花点时间阅读下面相关的教程：

• 图解CSS：CSS 的值和单位
• CSS中百分比单位计算方式
• CSS3的REM设置字体大小
• REM vs EM

CSS自定义属性给颜色使用带来的变化

在Web运用中很多时候希望能很好的实现换肤效果。比如下面这个录屏效果，用户调整颜色时对应的插画颜色也会有所调整：

CSS自定义属性结合JavaScript可以很好的实现这样的效果。复制unDraw中的一个插画，查看代码，我们可以发现SVG中图形中使用fill来填充图形颜色：

在SVG的元素上稍作调整，比如添加类名：

<path d="M980.94772,659.04355h-743a1,1,0,0,1,0-2h743a1,1,0,0,1,0,2Z" transform="translate(-218.05228 -135.88181)" fill="#3f3d56" class="seat__fill"></path>

并在对应的CSS添加样式代码：

:root {
    --primary-fill-color: #6c63ff;
    --secondary-fill-color: #2f2e41;
    --leaf-fill-color: #f2f2f2;
    --leaf-fill-color-2: #e6e6e6;
    --seat-fill-color: #3f3d56;
}

.primary__fill {
    fill: var(--primary-fill-color);
}

.secondary__fill {
    fill: var(--secondary-fill-color);
}

.leaf__fill {
    fill: var(--leaf-fill-color);
}

.leaf__fill--secondary {
    fill: var(--leaf-fill-color-2);
}

.seat__fill {
    fill: var(--seat-fill-color);
}

调整对应的CSS自定义属性的值就可以调整SVG图形的颜色：

为此，我们使用JavaScript操作CSS自定义属性相关的API可以让用户操作颜色控制面板来调整插画的颜色：

const svgEle = document.querySelector("svg");

const inputColors = document.querySelectorAll('input[type="color"]');

inputColors.forEach((element) =>
    element.addEventListener("input", (evt) => {
        svgEle.style.setProperty(`--${evt.target.id}`, `${evt.target.value}`);
        console.log(evt.target.value);
    })
);

请尝试调整示例中颜色，你将看到的效果如下：