CSS Modules 与 scoped 的区别：微观世界里的 CSS 封装

2024-01-11 14:37:30

在现代前端开发中，CSS 样式的管理和维护是一个非常重要的课题。随着项目的日益复杂，CSS 样式的数量和复杂度也在不断增加，这使得样式的管理变得越来越困难。为了解决这个问题，出现了各种各样的 CSS 预处理器，例如 SASS、LESS 等，它们提供了许多强大的功能来帮助我们管理 CSS 样式。其中，CSS Modules 和 scoped 就是两种非常流行的 CSS 封装方法。

CSS Modules

CSS Modules 是一种通过给样式名添加唯一的 hash 字符串后缀，从而实现样式隔离的方法。这种方法可以保证样式只在当前模块中生效，而不会影响到其他模块的样式。这使得 CSS Modules 非常适合于构建组件化或模块化的前端项目。

CSS Modules 的优点

样式隔离：CSS Modules 可以保证样式只在当前模块中生效，而不会影响到其他模块的样式。
代码复用：CSS Modules 可以通过 import 语法来复用其他模块的样式。
可维护性：CSS Modules 可以使 CSS 样式更易于维护和管理。

CSS Modules 的缺点

学习成本：CSS Modules 的学习成本相对较高，需要花费一定的时间来熟悉其语法和用法。
兼容性：CSS Modules 并不被所有浏览器所支持，在使用时需要考虑兼容性问题。

scoped

scoped 是一种通过将样式限制在特定的 HTML 元素内，从而实现样式封装的方法。这种方法可以保证样式只在当前元素及其子元素中生效，而不会影响到其他元素的样式。这使得 scoped 非常适合于构建组件化或模块化的前端项目。

scoped 的优点

样式隔离：scoped 可以保证样式只在当前元素及其子元素中生效，而不会影响到其他元素的样式。
代码复用：scoped 可以通过 template 语法来复用其他元素的样式。
可维护性：scoped 可以使 CSS 样式更易于维护和管理。

scoped 的缺点

兼容性：scoped 并不被所有浏览器所支持，在使用时需要考虑兼容性问题。
性能问题：scoped 会在每个元素上生成一个唯一的类名，这可能会导致性能问题。

CSS Modules 与 scoped 的区别

CSS Modules 和 scoped 都是 CSS 中实现样式封装的两种方法，但它们的工作方式却大不相同。CSS Modules 通过给样式名添加唯一的 hash 字符串后缀，从而实现样式的隔离，而 scoped 则通过将样式限制在特定的 HTML 元素内，实现样式的封装。

下表总结了 CSS Modules 和 scoped 的区别：

特性	CSS Modules	scoped
工作方式	给样式名添加唯一的 hash 字符串后缀	将样式限制在特定的 HTML 元素内
作用域	模块级	元素级
代码复用	通过 import 语法	通过 template 语法
可维护性	更易于维护和管理	更易于维护和管理
学习成本	较高	较低
兼容性	兼容性较差	兼容性较差
性能	性能开销较小	性能开销较大