CSS3自定义属性（CSS变量）突破了传统样式表静态的限制，把动态的功能加入到声明式的语法当中去。它和预处理器中的变量不同，在编译的时候就已经被替换掉了，而原生自定义属性是在浏览器运行过程中进行解析的，可以实时地读取、修改以及继承它们，给现代前端架构带来了一种新的方式来管理样式。
自定义属性用--开头来声明，使用var()函数调用它。它的范围是按照层叠规则来的，可以挂在:root上作为全局变量，也可以在局部选择器中覆盖掉它来实现样式隔离和复用。属性值可以是任何有效的CSS数据，比如颜色、大小、动画曲线等，还可以是字符串或者数字，配合calc()就可以做动态计算了。
在可维护性方面，自定义属性把设计令牌（Design Tokens）从分散的字面量中集中到一个统一的数据源里来。改变一个变量就可以使整个系统生效，不需要进行深层次的嵌套查找和重复替换。配合组件化的开发方式，基础组件可以接受变量的注入，业务层可以通过重写变量来定制外观，从而完全解耦了结构和样式。
动态主题切换是此功能的主要用途之一，传统的做法需要使用多个CSS样式表或者类名来进行切换，存在加载慢和维护困难的问题。通过自定义属性来改变:root或者data-theme中的变量值就可以使整个页面中的所有相关元素立即更新。还可以用JavaScript的setProperty()方法来做到不刷新页面就能实现主题切换、跟随系统颜色方案自动调整以及用户自己设定的颜色实时预览等功能。
在性能上，使用自定义属性来改变元素样式会引发浏览器的原生重绘过程，不需要重新解析CSS规则，因此比更换类名要快一些。但是要注意不能频繁地修改DOM结构以免引起布局抖动，可以用CSSOM一次性更新或者用requestAnimationFrame进行节流处理。
浏览器兼容性问题已经得到了解决，在老式环境中可以使用@supports渐进式增强或者编译时降级的方式来处理。在实际开发中应该制定好变量命名规范，按照功能来划分（基本颜色板、语义别名、组件变量等），同时用TypeScript或者Stylelint插件来进行类型检查和自动补全。
CSS3自定义属性除了是语法糖之外还是设计和开发之间的一种契约关系，合理使用可以大大减少样式熵的增长，使主题系统由硬编码转向数据驱动。
总结
CSS3自定义属性利用运行时动态解析和继承的方式来把样式由原来的静态声明变成可以编程的数据流，在提高代码可维护性的同时也给动态主题切换提供了一个高效、解耦的原生解决方案，是当今前端样式架构中必不可少的一部分。
