关于scoped是否有必要的问题

Question

我一般都是在最外层写上一个全局唯一的container类，用命名空间的概念来做样式隔离，因为scoped会增加一些垃圾代码，不知道老师对于这个问题的看法是怎样的？

代码案例：这莫非是个bug，我这边加不加scoped，他的样式都没有渲染进去

问题更新

如下图所示，我新创建了一个test组件，并在父组件中进行了引用，同时创建了和【my-search-container】一模一样的css选择器，但是却并没有进行覆盖，这是hbuilderx帮我们做的隔离么？究竟在什么情况下会出现样式的渗透呢？

Answer 1

Sunday 2021-08-01 14:19:13

你是在微信小程序端进行的渲染。
因为uniapp可以一次开发多端运行，运行端不同，呈现的结果会存在差异。
而通常我们都会采取最安全的方案

• 提问者 猿力 #1

  感谢老师的解答，明白啦！

Answer 2

Sunday 2021-08-01 11:47:57

首先我们需要先明确一下概念。 HBuilder 是一个编辑器，只提供编辑代码的功能。咱们使用的框架，叫做 uni-app。

而针对于问题，说白了其实就是  scoped 的作用，以及 scoped 区别于唯一的container类的地方。

那么首先，先来说一下 scoped 的作用：

当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素

这是官网给出的答案（https://vue-loader.vuejs.org/zh/guide/scoped-css.html#%E6%B7%B7%E7%94%A8%E6%9C%AC%E5%9C%B0%E5%92%8C%E5%85%A8%E5%B1%80%E6%A0%B7%E5%BC%8F） ， 也就是说使用 scoped 属性时，样式不会渗透到子组件中。

可以参考一下代码和图示

渲染结果

接下来是第二个问题：scoped 区别于唯一的container类的地方。

之前说过 唯一的container类 可以解决Scoped的一部分功能，也就是 不让样式渗出到 类名之外，但是它无法解决渗透到子组件的问题。

也就是说：当你在该组件下使用其他子组件时，你依然可以在该组件中修改子组件的样式。

具体可参考一下代码：

以下是渲染结果：

Answer 3

Sunday 2021-08-01 08:17:50

唯一的类名可以解决Scoped的一部分功能，但是当你的组件中使用其他组件的时候，是没有办法阻止样式渗透的

• 提问者 猿力 #1

  感谢老师的回答，不过我还是没有很理解，因为对于其他组件来说，他们的样式也是被限制在其父类之下的呀，为什么会存在渗透呢，而且我发现，hbuilder在编译的过程中好像也没有支持样式的渗透。