scoped CSS和CSS Module有什么本质区别？

本文共计1135个文字，预计阅读时间需要5分钟。

这篇关于CSS的scoped CSS和CSS Module的区别的文章，大部分人对这两者的理解并不深入。因此，我自由地结合了大家的观点，为大 家总结了以下内容，内容详尽，步骤清晰，易于理解。

CSS的scoped和CSS Module的区别主要在于它们如何处理样式的作用域和模块化。以下是它们的详细对比：

1. scoped CSS

- 作用域限制：scoped CSS确保样式仅应用于当前组件，不会影响到其他组件。- 实现方式：通过给每个组件的根元素添加一个唯一的属性（如`data-v-app-id`），并在CSS选择器中使用该属性来限制样式的作用域。- 优点：易于实现，对现有项目的兼容性好。- 缺点：不支持嵌套选择器，可能需要额外的JavaScript代码来处理样式绑定。

2. CSS Module

- 模块化：CSS Module将CSS类名转换为唯一的标识符，从而实现模块化。- 实现方式：通过在CSS文件中使用`module`关键字，使得CSS类名在全局范围内唯一。- 优点：支持模块化，可以避免全局命名冲突，方便在不同组件间共享样式。- 缺点：需要构建工具支持，对现有项目的兼容性较差。

3. 对比

- 作用域：scoped CSS限制在当前组件内，CSS Module实现全局唯一。- 模块化：scoped CSS不提供模块化，CSS Module提供模块化。- 兼容性：scoped CSS对现有项目的兼容性好，CSS Module需要构建工具支持。

总结：

- 如果你的项目不需要模块化，且对样式的作用域有限制，scoped CSS是一个不错的选择。- 如果你的项目需要模块化，且对全局命名冲突有担忧，CSS Module是更好的选择。