关于前端: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 的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 属性取得了 响应式更新能力，使其灵活性大大晋升。

对于如下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 的编译时了。这种转变，你承受吗？

关于前端:CSS也能像组件状态一样响应式更新

进击的 Vue CSS 解决方案

响应式 CSS 属性

实现原理

总结