芒果记账反思：CSS最佳实践——deep语法

html-css020

芒果记账反思：CSS最佳实践——deep语法,第1张

加了scoped，对其它组件不生效，只对本组件元素有效。如果不加scoped呢？不好，会影响其他组件的样式。那么，有什么好的方法吗？答案就是使用deep语法。

我们通过 ::v-deep 操作符就使Types组件内的 li 添加了样式

我们传入一个初始值给 Types 子组件，让其记录选中的 li 标签显示我们自定义的样式。

这只是有两个li的情况，如果里面有很多个li呢？所以我们需要精确选中。

封装成一个函数，返回一个对象，还可以接受参数，方便遍历。

我们使用scoped实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块.但我们难免会用到一些框架如element vant等,我们想要修改其中样式时,如果使用了scoped,则需要深度选择器来进行样式的更改.

使用场景:

当我们需要覆盖element-ui中的样式时只能通过深度作用选择器

style为css时的写法如下

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>>的别名，同样可以正常工作。

style使用css的预处理器(less, sass, scss)的写法如下

第一种/deep/

第二种::v-deep

建议使用第二种方式,/deep/在某些时候会报错,::v-deep更保险并且编译速度更快.

样式覆盖啊。

1、单独写一个css文件专门用来覆盖vant，放在vant样式后面引入。

2、增加独有类名，在Popup的class上多加一个样式名。

3、css路径上多加几层。比如.a .b .Popup {}

4、用!important增加权重。比如{height:100px !important}

5、使用css属性deep。比如.a /deep/ .b {} 或者.a >>>.b {}，据说后者兼容性好一点