Vue里的CSS之scoped、deep的使用和弃用指南

Vue CSS：scoped 和 deep 选择器的替代方案

在 Vue 中，scoped 和 deep 选择器曾经是用于管理组件样式和避免冲突的常见工具。然而，由于它们固有的限制和维护方面的挑战，Vue 社区已逐渐转向更现代且可扩展的方法。

scoped 选择器：限制样式作用域

scoped 选择器允许将 CSS 样式限制在特定组件内，防止它们影响其他组件的样式。虽然这最初看起来很有吸引力，但它却限制了组件的样式可重用性，并可能导致代码重复。

<style scoped>
.my-component {
  color: red;
}
</style>

deep 选择器：跨越组件边界

deep 选择器允许 CSS 样式穿透组件边界，直接影响组件内部的元素。虽然这在某些情况下很有用，但它会导致 CSS 代码难以维护和难以管理嵌套组件的样式。

<style>
/deep/ .my-component {
  color: red;
}
</style>

替代方案：CSS 模块

CSS 模块是一种现代方法，它允许将 CSS 样式封装在组件内部，避免冲突。通过添加 module 属性，您可以将样式限制在组件中，同时仍然允许它们从外部引用。

<style module>
.my-component {
  color: red;
}
</style>

替代方案：组件类名

组件类名是另一种避免样式冲突的简单方法。您可以将唯一的类名添加到组件，然后在 CSS 中使用该类名来指定样式。

<template>
  <div class="my-component">
    ...
  </div>
</template>

.my-component {
  color: red;
}

为什么不再使用 scoped 和 deep 选择器？

虽然 scoped 和 deep 选择器在某些情况下可能仍然有用，但它们已不再被推荐用于现代 Vue 项目，原因如下：

• 限制可重用性： scoped 选择器限制了组件样式的可重用性，因为它们仅适用于特定组件。
• 维护困难： deep 选择器会造成 CSS 代码难以维护，尤其是在处理嵌套组件时。
• 与 CSS 标准不符： deep 选择器不符合 CSS 标准，可能导致浏览器兼容性问题。
• 更好的替代方案： CSS 模块和组件类名提供了更灵活、可重用和可维护的替代方案。

常见问题解答

1. 我应该完全停止使用 scoped 和 deep 选择器吗？

是的，在现代 Vue 项目中，不建议使用 scoped 和 deep 选择器。相反，请使用 CSS 模块和组件类名。

2. CSS 模块与组件类名有什么区别？

CSS 模块将样式封装在组件内部，而组件类名使用唯一的类名将样式应用于组件。 CSS 模块提供更好的封装和可重用性，而组件类名则更简单。

3. 我可以使用 scoped 或 deep 选择器来解决特定问题吗？

虽然在某些罕见情况下，您可能需要使用 scoped 或 deep 选择器，但通常不建议这样做。它们会导致维护问题，并违反 Vue 中最佳实践。

4. 除了 CSS 模块和组件类名之外，还有什么替代方案？

其他替代方案包括：

• BEM（块元素修饰符）命名约定
• SASS 或 SCSS 等预处理器

5. 如何迁移到不再使用 scoped 和 deep 选择器？

• 识别并删除所有 scoped 和 deep 选择器。
• 使用 CSS 模块或组件类名替换它们的样式。
• 调整 CSS 以适应新的样式约定。