大家好，我是卡颂。

不晓得平时在我的项目里你怎么解决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的编译时了。这种转变，你承受吗？