如何让CSS像组件状态一样实现响应式更新呢?

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

我们知道,由于原生CSS存在一些问题,比如:

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

社区涌现出很多解决方案,比如:

  • 命名规范(比如BEM规范)
  • 模块规范(CSS Modules)
  • CSS预处理器(比如Less
  • CSS In JS
  • CSS框架(Tailwind CSS
  • ……

如果我们按以下三个维度评判这些方案:

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

会发现每个方案都有自己的优势与短板。

如何让CSS像组件状态一样实现响应式更新呢?

比如:

  • CSS In JS方案用JSCSS,拥有极高灵活性,但加大了上手难度
  • LessCSS预处理器)可以看作CSS的超集,上手难度低、有一定编程能力,但是CSS自身的问题他也存在

业界常见做法是:同时使用BEM规范(解决命名冲突问题)+ CSS预处理器。

进击的Vue CSS解决方案

我们用这三个维度分析下VueSFC(Single-File-Component,单文件组件):

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

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

<style scoped>
  p {
    color: #0f0;
  }
</style>
  • 上手难度:样式在<style>标签内书写,与原生CSS别无二致,上手简单,符合直觉
  • 能力:scoped标识提供了模块化能力
  • 灵活性:可以使用各种预处理器,有一定灵活性

可以看到,Vue SFC采用的是一种各方面没有明显短板,局部很突出(上手难度低)的CSS方案。

随着Vue 3.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-bindcolor属性绑定该状态。效果如下:

如何让CSS像组件状态一样实现响应式更新呢?

为了验证响应式更新能力, 为div增加点击事件:

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

点击后会让color状态在redgreen间切换。可以看到,页面样式也会同步变化:

让color状态在red与green间切换

Demo地址:点击这里

不仅是color,你可以为任何CSS属性绑定状态。

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

实现原理

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

在我们的例子中:

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

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

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

并作为style属性赋值给div

作为style属性赋值给div

.text经过编译会使用该CSS变量:

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

当颜色变化后,CSS变量的值随之变化:

如何让CSS像组件状态一样实现响应式更新呢?

所以,要使用这个特性需要目标浏览器支持CSS变量。

目标浏览器支持CSS变量

Vue3放弃IE这可是说到做到的。

总结

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

经过这波操作,Vue SFCCSS灵活性有了很大提高。

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

之前的自定义指令都是运行时的,以后的指令可能会是基于AST的编译时了。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 如何让CSS像组件状态一样实现响应式更新呢?

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们