当前位置: 首页 > Web前端 > vue.js

CSS也能像组件状态一样响应式更新吗?

时间:2023-03-31 15:26:19 vue.js

p{color:#0f0;}大家好,我是Kason。不知道大家在项目中平时是怎么处理CSS的呢?我们知道原生CSS存在一些问题,比如:复用时容易出现样式冲突,没有scope,没有模块化,没有编程能力。社区涌现了很多解决方案,比如:命名约定(比如BEM规范)和模块规范(CSSModules)CSS预处理器(比如Less)CSSInJSCSS框架(TailwindCSS)...如果我们根据这些方案来判断分为以下三个维度:上手难度:越接近原生CSS,越容易上手灵活性:越有编程能力,越灵活:能解决多少原生CSS问题,就会发现每一个解决方案各有优缺点。例如:CSSInJS程序使用JS编写CSS,具有极高的灵活性,但增加了上手的难度。Less(CSS预处理器)可以看作是CSS的一个超集。他还有的问题是业界通行的做法:同时使用BEM规范(解决命名冲突)+CSS预处理器。攻击VueCSS方案我们通过这三个维度来分析Vue的SFC(Single-File-Component,单文件组件):p{color:#0f0;}上手难度:样式写在