为什么不建议在 Vue ＜style＞ 中使用 scoped?

前言

亲爱的小伙伴，你好！我是 嘟老板。我们使用 Vue 开发页面时，经常需要在 <style> 标签下编写样式。不知你是否留意，在 <style> 标签下有一个属性经常出现 - scoped。你知道它起到什么作用吗？原理是怎样的？有没有什么弊端呢？今天我们就来聊聊它。

1. 什么是 scoped？

scoped 顾名思义，与作用域有关，因为是设计组件样式的，所以可以叫他 css 作用域 或 样式作用域。当 <style> 标签带有 scoped 属性时，<style> 内的样式只会影响当前组件内的元素。如果你对 WebComponent 有了解的话，会发现 scoped 的作用域 Shadow DOM 比较类似。

我们先来看一段代码：

<template>
  <div class="home">
    parent
  </div>
</template>
<script setup>

</script>
<style lang="scss" scoped>
.home {
  width: 200px;
  height: 200px;
  background-color: lightblue;
}
</style>

这是一个很简陋的 Vue 组件， 只需要在 <style> 便签上添加 scoped 属性，就能达到 限制样式作用域 的目的。

2. scoped 的作用是什么？

2.1 限制样式作用域

保证 <style> 标签内的样式仅在当前组件生效，而不会影响其他组件的样式，包括子组件。

我们来强化一下上面的代码：

<!-- Home.vue -->
<template>
  <div class="home">
    parent
    <Child />
  </div>
</template>
<script setup>
import Child from './components/Child.vue'
</script>
<style lang="scss" scoped>
.home {
  width: 200px;
  height: 200px;
  background-color: lightblue;
}
</style>

新增一个 Child.vue 组件，有两个 div 元素，其中根节点添加 child 样式类，内部节点添加 child-inner 样式类：

<template>
  <div class="child">
    child
    <div class="child-inner">
      child-inner
    </div>
  </div>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
.child {
  width: 100px;
  height: 100px;
  background-color: lightcoral;

  .child-inner {
    width: 50px;
    height: 50px;
    background-color: lightpink;
  }
}
</style>

运行效果如下：

然后我们在 Home.vue 中设置 Child.vue 组件的 child-inner 样式类，将文字颜色设为红色：

<!-- Home.vue -->
<style lang="scss" scoped>
.home {
  width: 200px;
  height: 200px;
  background-color: lightblue;

  .child-inner {
    color: red;
  }
}
</style>

然而样式没有变化，说明 Home.vue 的样式没有渗透到 Child.vue 组件内部样式

2.2 控制子组件根节点样式

使用了 scope 的样式虽然无法影响子组件的内部样式，但是可以影响子组件的根节点。也就是说子组件的根节点同时受 父组件的作用域样式 和 子组件的作用域样式 影响。

为什么要这样设计呢？

父组件可能存在需要控制子组件布局的情况。比如，列表数据也可能需要以栅格布局展示，这就需要通过按钮触发切换不同的布局效果。

假设子组件用于列表展示，父组件提供按钮入口，允许父组件作用域控制子组件的布局，那么切换列表的展示形式就轻而易举了。

我们继续调整下 Home.vue 的样式，将 child 改为 flex 布局，内容居中：

<style lang="scss" scoped>
.home {
  width: 200px;
  height: 200px;
  background-color: lightblue;

  .child {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>

运行效果如下：

3. scoped 原理是什么?

scoped 的原理主要是 通过为当前组件的模板添加一个独一无二的属性，然后在 CSS 选择器中添加这个属性，从而实现样式的局部作用域。

它的实现可以分为几个步骤：

1. 当 Vue 编译器编译一个包含 scoped 的 <style> 标签时，会为每个 CSS 规则添加一个独特的属性，比如 data-v-4533200f。这个属性是自动生成的，确保了在整个应用中的唯一性。

2. 编译器将模板中的每一个 HTML 标签都添加上相同的属性。这样，当浏览器解析和应用 CSS 样式时，只有带有这个属性的元素才会被这些规则影响，实现了样式的局部作用域。

3. 对于子组件，它们的根元素也会被添加上父组件的属性，所以父组件的 scoped 样式可以影响到子组件的根节点。然而，这个属性不会被添加到子组件的内部元素，所以父组件的样式不会影响到子组件的内部样式。

这种实现方法主要利用了 **CSS 选择器的属性选择器和浏览器的样式解析机制。

4. 为什么我不建议使用 scoped？

4.1. 样式优先级问题

由于 scoped 通过添加唯一的属性来工作，这会增加选择器的特异性，可能导致由于特异性不同而出现样式优先级问题。

例如父组件 Home.vue 中有一个 warning 类，表示警告信息。子组件 Child.vue 同样有包含 warning 类的警告信息，想要通过在父组件中设置 warning 类的样式，统一控制父子组件的警告样式。

    <!-- Home.vue -->
    <template>
      <div class="home">
        <div class="warning">parent</div>
        <Child />
      </div>
    </template>
    <script setup>
    import Child from './components/Child.vue'
    </script>
    <style lang="scss" scoped>
    .home {
      width: 200px;
      height: 200px;
      background-color: lightblue;

      .warning {
        background-color: lightsalmon;
      }

    }
    </style>

    <!-- Child.vue -->
    <template>
      <div class="child">
        <div class="warning">child</div>
        <div class="child-inner">
          child-inner
        </div>
      </div>
    </template>

    <script setup lang="ts"></script>

    <style lang="scss" scoped>
    .child {
      width: 100px;
      height: 100px;
      background-color: lightcoral;

      .child-inner {
        width: 50px;
        height: 50px;
        background-color: lightpink;
      }
    }
    </style>

运行后会发现，Child.vue 样式应没有生效，为什么呢？

因为父组件的 warning 拼接了该元素上特有的属性，无法作用到子组件的 dom 节点。

4.2. 无法跨组件边界工作

这其实是对上一个问题的延伸，scoped 无法控制其他组件的样式，包括子组件。这在构建大型应用程序时可能会限制你的样式选项。

当然啦，针对这种场景，vue 也为我们提供了解决方案，那就是 深度选择器 - :deep() 。可以使用 :deep() 包括需要穿透的类，达到影响子元素的效果。

    <style lang="scss" scoped>
    .home {
      width: 200px;
      height: 200px;
      background-color: lightblue;

      :deep(.warning) {
        background-color: lightsalmon;
      }

    }
    </style>

不过若是频繁使用 :deep()，影响代码美观和整洁度是必然的。

4.3. 性能问题

使用 scoped 可能会导致性能问题，因为浏览器在渲染时必须查找和匹配这些唯一的属性。

5. 相似方案

5.1 CSS 模块 (CSS Modules)

这是一个在编译时将类名和动画名进行本地范围限定的 CSS 文件，可以有效地实现样式隔离。

5.2 BEM（Block Element Modifier）或者其他 CSS 命名策略

恰当的命名策略可以帮助更好地组织和理解样式设计，并实现一定程度的样式隔离。

5.3 使用 CSS-in-JS 库，如 Styled Components 或者 Emotion

这些库可以提供更强大和灵活的样式封装选项，实现完全的样式隔离。

简单列举几个可行的方案，暂时先不做详细讲解.小伙伴感兴趣的话，后续会逐步更新。

个人在项目有用过 BEM 命名策略和 CSS Module。

BEM 结合工具函数和 scss 预处理函数，可以极大地减轻应用的心智负担，比较典型的 ElementPlus 中就有 BEM 命名策略的应用。

CSS Module 我更多的是在 React 项目中使用，Vue 项目中用的不多，需要借助插件实现。

结语

好啦，今天的内容就到这里啦。关于 scoped 这个特性，必定是 仁者见仁，各有想法。不得不说，它还是一个比较实用的特性，可以帮助我们比较方便的实现样式隔离的需求，且不需要额外的 polyfil。亲爱的小伙伴，你怎么看呢，欢迎评论区留言讨论。

感谢阅读，愿 你我共同进步，谢谢！！！