CSS 自定义属性在Web组件中的应用
CSS 自定义属性在Web组件中的应用
今天我们不聊什么是CSS自定义属性，而把重点放在CSS自定义属性在组件中怎么使用，她又会给我们设计组件带来什么样的变化和相应的优势。在这篇文章中，我们主要会探讨CSS自定义属性为Web组件服务，以及怎么利用CSS自定义属性来维护组件。
设计背景
Web组件的设计对于Web从业人员来说是最常见的一部分了，随着JavaScript框架到来，除了给我们为组件设计带来了红利，但也给我们造成一定的约束性。比如说，我们设计的一个Web组件，应该提供什么样的方式给Web开发人员使用是最佳的姿势。不管是CSS方法论的基础上设计的UI组件，还是基于JavaScript框架上（比如Vue、React）设计的UI组件，在提供给开发者使用上来说还是存在一定的约束性。或者说可扩展性并不是非常的灵活。这也是令很多设计Web组件的同学来说头痛的地方，也在致力解决的一个点。
值得幸运的是，CSS Houdini的出现，给Web组件的设计带来了一些灵感，至少我在这方面得到较强的设计灵感。接下来，我们来阐述CSS Houdini给Web组件的设计带来什么灵感？感兴趣的同学请继续往下阅读。
CSS Houdini给组件带来的扩展性
在《提示框组件的实现给我带来的思考和探索》一文中的结尾处向大家演示了如何通过CSS Houdini来设计一个Tooltips的组件：
同时给大家留下一个还需要继续探讨的话题：
设计稿中的组件
接下来先拿一个最简单的组件来举例。在讲故事之前，我们先来看设计稿中对某个组件的理解，比如按钮（即Button）：
从Sketch设计面板上可以看到，对按钮在UI上有影响的属性，如果拿CSS来对比的话，可能会有：
- 宽度 ─➤
width - 高度 ─➤
height - 边框 ─➤
border - 圆角 ─➤
border-radius - 阴影 ─➤
box-shadow - 背景 ─➤
background（可能是background-image，也可能是background-color） - 字体 ─➤
font(比如font-size) - 文本颜色 ─➤
color
其中一些属性是用于UI风格（比如border-color、color、background和box-shadow），一些属性是用于UI大小（比如width、height、border-width和font-size）。如果我们把这些都声明成一个自定义属性（可灵活调整）：
--backgroundColor: #F2F3F7
--borderColor: #C4C6CF
--borderRadius: 3px
--fontSize: 16px
--color: #333
--padding: 5px 10px
CSS Framework中的UI组件
在社区中CSS Framework有很多，比如大家熟悉的Bootstrap就是其中之一，就我个人而言一直喜欢这个CSS框架。在Bootstrap中有很多UI组件，同样拿按钮来举例：
就上图而言，整个Bootstrap在设计UI组件的时候也采用了一些CSS方法论。2019年的CSS报告中统计了社区中常用的一些CSS方法论：
Bootstrap中就使用了OOCSS的相关特性。比如按钮他有一个基类btn，然后有一个扩展类btn-primary：
.btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
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-primary {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
其他风格的按钮也是采用类似方式实现的。可以说，这种设计UI组件的方式是个古老的方式。
CSS自定义属性给UI组件带来的变革
这些年CSS的技巧在不断的革新，特别是近几年，可以说是一种飞跃性的发展。其中CSS 自定义属性的进展就足以令我们目瞪口呆，发展神速。
从设计软件中我们可以获知，设计的任何UI组件，都有很多参数可以用来控制组件的样式风格，比如说大小，皮肤等。而这些参数就可以和CSS自定义属性匹配起来。
继续拿Button来举例，我们可以在基类中声明按钮UI所需的参数，比如：
.button {
// 声明CSS自定义属性
--backgroundColor: #fff;
--borderColor: #ccc;
--borderRadius: 5px;
--fontSize: 16px;
--color: #333;
--padding: 5px 10px;
// 按钮的基本样式
display: inline-flex;
justify-content: center;
align-items: center;
// 调用CSS自定义属性
background: var(--backgroundColor);
border: 1px solid var(--borderColor);
color: var(--color);
font-size: var(--fontSize);
padding: var(--padding);
border-radius: var(--borderRadius);
}
效果如下：
其中--padding、--fontSize用来控制按钮大小；--backgroundColor、--color、--borderColor和--borderRadius用来控制按钮的皮肤。如果我们需要其他风格的按钮时，我们可以这样使用：
<!-- HTML -->
<div class="button primary" role="button">Primary Button</div>
<div class="button danger large" role="button">Danger && Large Button</div>
// CSS
.primary {
--backgroundColor: #007bff;
--borderColor: #007bff;
--color: #fff;
}
.danger {
--color: #fff;
--backgroundColor: #dc3545;
--borderColor: #dc3545;
}
.large {
--padding: .5rem 1rem;
--borderRadius: .3rem;
--fontSize: 1.25rem;
}
看到上面的示例，你可能会问为什么不显式的设置width和height来控制按钮的大小呢？就我个人经验来说，能不显式设置width和height来控制元素大小就尽量不要使用，就算是要设置，也更应该考虑min-width和min-height这样的属性。另外在CSS中，还有更为灵活来控制元素在大小的属性，即min-content()、max-content()和fit-content()函数和fill-available（width的一个属性值）等。有关于这几个函数的使用可以阅读W3C的CSS Intrinsic & Extrinsic Sizing Module Level 3规范或者@张鑫旭大师的《理解CSS3 max/min-content及fit-content等width值》一文。
另外为了更好的向大家演示CSS自定义属性给UI组件带来的灵活性和可维护性，下面一个示例，借助CSSOM中的CSSStyleDeclaration中的setProperty()和getPropertyValue()方法来重构一个CSS自定义属性构建的UI组件：
操作右侧表单项，就可以轻易的控制按钮的样式风格：
CSS自定义属性在Vue组件中的应用
时至今日，仅基于CSS来构建UI的场景越来越少了。随着类似Vue和React这样的优秀框架的诞生，在组件构建方面大部分都基于这两大体系。接下来就和大家一起探讨CSS自定义属性怎么在JavaScript框架中来构建组件。
同样拿Button组件来举例。在Vue的项目中构建一个Button组件，在样式的构建和维护上同样使用CSS自定义属性：
// Button.vue
<template>
<div class="button">{{ text }}</div>
</template>
<script>
export default {
name: 'Button',
props: {
text: String
}
}
</script>
<style scoped>
.button {
--backgroundColor: #fff;
--borderColor: #ccc;
-