CSS也能像组件状态同样响应式更新？

你们好，我是卡颂。

不知道平时在项目里你怎么处理CSS呢？

咱们知道，因为原生CSS存在一些问题，好比：

• 复用时容易样式冲突
• 没有做用域、没有模块化
• 没有编程能力

社区涌现出不少解决方案，好比：

• 命名规范（好比BEM规范）
• 模块规范（CSS Modules）
• CSS预处理器（好比Less）
• CSS In JS
• CSS框架（Tailwind CSS）

......

若是咱们按如下三个维度评判这些方案：

• 上手难度：与原生CSS越接近，越好上手
• 灵活性：拥有越强编程能力，越灵活
• 能力：能解决多少原生CSS的问题

会发现每一个方案都有本身的优点与短板。

好比：

• CSS In JS方案用JS写CSS，拥有极高灵活性，但加大了上手难度
• Less（CSS预处理器）能够看做CSS的超集，上手难度低、有必定编程能力，可是CSS自身的问题他也存在

业界常见作法是：同时使用BEM规范（解决命名冲突问题）+ CSS预处理器。

进击的Vue CSS解决方案

咱们用这三个维度分析下Vue的SFC（Single-File-Component，单文件组件）：

<template>
  <p>xxx</p>
</template>

<script>
  // ...
</script>

<style scoped>
  p {
    color: #0f0;
  }
</style>

• 上手难度：样式在<style>标签内书写，与原生CSS别无二致，上手简单，符合直觉
• 能力：scoped标识提供了模块化能力
• 灵活性：可使用各类预处理器，有必定灵活性

能够看到，Vue SFC采用的是一种各方面没有明显短板，局部很突出（上手难度低）的CSS方案。

随着Vue3.2发布，Vue SFC中的CSS属性得到了响应式更新能力，使其灵活性大大提高。

响应式CSS属性

对于以下Vue SFC：

<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style>
.text {
  color: v-bind(color);
}
</style>

<script>标签内定义了状态color = 'red'

.text使用v-bind为color属性绑定该状态。效果以下：

为了验证响应式更新能力， 为div增长点击事件：

<div class="text" @click="color= color === 'red' ? 'green' : 'red'">hello</div>

点击后会让color状态在red与green间切换。能够看到，页面样式也会同步变化：

Demo地址

不只是color，你能够为任何CSS属性绑定状态。

那么这个特性是如何实现的呢？

实现原理

每一个使用v-bind绑定到CSS属性的状态对应一个CSS变量，该CSS变量会做为style属性赋值给组件最外层DOM。

在咱们的例子中：

.text {
  color: v-bind(color);
}

其中v-bind(color)会成为CSS变量：

并做为style属性赋值给div：

.text通过编译会使用该CSS变量：

.text {
  // 编译前
  /* color: v-bind(color); */
  // 编译后
  color: var(--469af010-color);
}

当颜色变化后，CSS变量的值随之变化：

因此，要使用这个特性须要目标浏览器支持CSS变量。

Vue3放弃IE这但是说到作到的。

总结

Vue官方称该特性为State-Driven Dynamic CSS。

通过这波操做，Vue SFC的CSS灵活性有了很大提升。

而且，有了v-bind这个开头，相信将来会出现更多与响应式更新挂钩的自定义CSS指令。

以前的自定义指令都是运行时的，之后的指令可能会是基于AST的编译时了。这种转变，你接受吗？