CSS学习-scoped or deep

站长

2023年07月17日 15:40 · 阅读数 19

Vue里的css中为什么要scoped,和deep,为什么又不用呢？

最近的工作是修改css将网页做成一个适配版网页，前面几天写的时候，因为代码里使用了一些组件库，比如Iview,Element-UI,然后当我想要改变这些组件里面的属性的样式的时候，我发现，我好像拿不到该元素，根本改变不了它的样式，即使把它设置成了!important也没有用。

然后转头看了一眼style定义的东西，采用了less预编译器，然后利用了scoped，只把css给当前vue使用，不暴露。我刚开始是真不知道，没错啊，为什么会拿不到元素呢?比如ivu-table。

<style lang="less" scoped> 
    height:100%;
</style>

查阅文档发现原来，使用 Vue 的 Scoped CSS，它的设计初衷是将样式限定在组件的作用域内，以避免样式污染和冲突。然而，这也意味着 Scoped CSS 会限制你在组件外部选择和修改组件内部的元素和样式。所以我们无法拿到该元素。那么解决办法也就要出现了。

方法一 >>>深度选择器/deep/


<style scoped> 
.my-component >>> .iview-component {
    /* 修改 IVIEW 组件的样式 */ 
} 
</style>

<style scoped> 
.my-component /deep/ .iview-component { 
    /* 修改 iview-component 的样式 */ 
 } 
</style>

用了这个的我开始窃窃自喜，真不错，又学了一个知识点。

可是我老大跟我说，万一我没有用预编译器less呢。原来用深度选择器要有一定的条件。

这是一些它的弊端

依赖特定的CSS预处理器：深度选择器通常与特定的CSS预处理器（如Sass或Less）一起使用。这意味着你需要在项目中配置和使用这些预处理器，以便正确编译深度选择器。如果你的项目没有使用这些预处理器，深度选择器可能无法正常工作。
依赖特定的CSS框架：深度选择器通常与特定的CSS框架（如Vue的Scoped CSS或Angular的Shadow DOM）一起使用。这些框架会在编译或运行时处理深度选择器，并将其转换为适当的选择器。如果你的项目没有使用这些框架，深度选择器可能无法正常工作。
可能导致性能问题：深度选择器涉及到选择器的嵌套和遍历，可能导致性能上的开销。在大型项目中，使用深度选择器可能会增加CSS选择器的复杂性，导致页面加载和渲染速度变慢。
可能导致样式耦合：深度选择器可以穿透组件边界选择子元素，这可能导致样式的耦合性增加。如果多个组件都使用了相同的深度选择器来选择子元素，当一个组件的样式发生变化时，可能会意外地影响到其他组件的样式。

方法二自己定义一个外部类名

<div class="myBox">
    <Table>
    </Table>
</div>

比如这种，我们在最外部定义一个当前的盒子classmyBox,然后我们可以将所有的css修改都放在当前这个css类名下,这样我们就可以不会影响其他元素，还能拿去组件库里的元素进行操作。

<style> 
.myBox Table{

}
</style>