今天我们不聊什么是**CSS自定义属性**，而把重点放在CSS自定义属性在组件中怎么使用，她又会给我们设计组件带来什么样的变化和相应的优势。在这篇文章中，我们主要会探讨CSS自定义属性为Web组件服务，以及怎么利用CSS自定义属性来维护组件。

众所周之，CSS的维护一直是件不易的事情，特别是在构建大型Web站点或Web应用程序时，如果是多人协作的话难度更大。另外，由于CSS语言是一种声明式语言，而且不像其他语言有变量、条件和逻辑等特性，一直生存在程序语言鄙视链的最底层。也因为这个原因，社区中有了各种CSS处理器语言，比如Sass、LESS和Stylus等。这些处理器语言引入了一些类似其他程序语言的特性，比如变量、运算符和逻辑运算等。虽然CSS处理器给编写和维护CSS带来了一些便利，但还是需要额外的编译。不过处理器中的变量着实为我们带来很大的优势，也正因为如此，社区开始将CSS处理器中的变量引入到原生CSS中，经过多年的推进和演变才有了今天的CSS自定义属性。

这几天一直在折腾CSS自定义属性，在《图解CSS：CSS自定义属性》和《CSS 自定义属性在Web组件中的应用》都在聊CSS自定义属性。但这个CSS自定义属性和今天要聊和CSS的自定义属性还是有所不同的。他们隶属于两个不同的规范，前者是CSS Custom Properties for Cascading Variables Module Level 1，后者是CSS Properties and Values API Level 1。虽然都是W3C规范中的内容，但还是有较大差异的。而今天要和大家聊的是后者，即CSS Houdini中的CSS自定义属性。

时至今日，CSS自定义属性对于CSS而言不是什么新特性了，它也被纳入到W3C的规范中，即**CSS Custom Properties for Cascading Variables Module Level 1**。在《CSS自定义属性》一文中我们对CSS自定义属性（变量）做过全面的介绍，如果你阅读过该文，你应该对CSS自定义属性会有一个基本性的了解以及如何在实际项目中使用该特性。那么再试问一下，你对CSS自定义属性知道多少呢？如果你无法清楚的回答清楚，请继续往下阅读。

在图解CSS系列的《CSS自定义属性》一文中，对CSS的自定义属性做过深入的阐述。如果你阅读过这篇文章，应该对CSS自定义属性有所了解，也能体会到该特性的强大之处。今天，CSS自定义属性可以用于Web开发中的很多地方，能让开发者变得更为便捷灵活，比如最近流行的Dark Mode开发。而今天我们就来和大家聊聊CSS自定义属性在组件开发中的运用。

@property是CSS中新增的一个@规则的属性，是**CSS Houdini** 的 CSS属性和值 API Level 1 （CSS Properties and Values API Level 1）一个属性，可以用来自定义CSS属性，也被称为CSS的变量。为了能很好的区分CSS自定义属性，我更喜欢将其称为CSS Houdini的自定义属性（或变量）。你可能会好奇，它和原生的CSS自定义属性有何不同，又有何独特的特性，可以用来做什么？如果你感兴趣的话，请继续往下阅读。

很多Web开发者更喜欢将 *CSS自定义属性 称之为 CSS变量。在2020年中社区中有关于CSS自定义属性的讨论到处可见，小站也有很多关于CSS自定义属性的相关教程，而且在很多Web应用中也可以看到CSS自定义属性的身影。虽然如此，但有很多开发者对CSS自定义属性了解的不多，甚至说不怎么理解，也用不好CSS自定义属性。这篇文章和以往介绍CSS自定义属性的文章有所不同，我从不同的角度来阐述CSS自定义属性，主要是希望这篇文章能让Web开发者更好地理解CSS自定义属性，以及如何更好的使用该属性。如果你对该话题感兴趣的话，请继续往下阅读。

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

CSS自定义属性已是CSS中非常成熟的特性了，也是近两年非常受欢迎的特性。它的到来让CSS像其他编程语言一样，可以在编写CSS的时候变量，而且还可以在CSS具备动态计算、逻辑运算和状态切换等特性。特别是CSS Houdini的CSS自定义属性更进一步的扩展了CSS的能力。就我个人而言，在几年前CSS自定义属性就进入我的世界，而且相关的规范也阅读过好几次。但自从阅读了@Lea Verou的《The -​-var: ; hack to toggle multiple values with one custom property》一文之后，我才发现自己遗漏了CSS自定义属性中一个非常关键，而且非常强大的特性。那就是CSS自定义属性中的无效变量，即var()函数中使用了一个无效的变量。如果我们在使用CSS自定义属性的时候，要是有效的使用了无效变量，它可以帮助我们实现一些非常有意思的功能。比如说状态切换，主题切换等。在接下来，我们就一起来探讨这方面的话题。

最近在团队内搞Design Token 输出 CSS 或 JavaScript 变量的一些事情，希望使用 Design Tokens 来描述一个组件的可变参数，从而基于一个 UI 设计能动态输出多个 UI 效果。为此从颜色系统这一块着手，希望使用 Design Token 和 CSS 变量能构建一个具有可访问性的颜色系统。在这篇文章中想和大家一起聊聊这方面的话题，希望大家感兴趣。