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

1. 进击的 Vue CSS 解决方案
2. 响应式 CSS 属性
3. 实现原理
4. 总结

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

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

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

社区涌现出很多解决方案，比如：

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

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

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

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

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

总结

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

经过这波操作，Vue SFC的CSS灵活性有了很大提高。

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

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