CSS Modules vs Scoped CSS: 哪种样式隔离更胜一筹？

2022-12-01 21:08:24

CSS 预处理器：深入了解 CSS Modules 与 Scoped CSS

在现代 Web 开发中，CSS 预处理器已成为不可或缺的工具，它们允许我们分离样式和 HTML 代码，从而提高代码的可维护性和可重用性。在众多的 CSS 预处理器中，CSS Modules 和 Scoped CSS 脱颖而出，凭借其强大的样式隔离功能。让我们深入了解这两者的区别。

CSS Modules

CSS Modules 是一种基于 PostCSS 的 CSS 预处理器，采用模块化的方法来实现样式隔离。它将每个 CSS 文件封装为一个模块，每个模块都有自己独立的作用域。通过将 CSS 类名与模块名称关联，CSS Modules 确保样式仅应用于模块内的元素。

优点：

强大的样式隔离性： 模块化结构防止样式泄漏到其他部分。
代码可重用性高： CSS Modules 允许您打包和重用组件化样式。
易于维护： 分离样式有助于保持代码整洁和易于维护。

缺点：

需要 PostCSS： CSS Modules 需要 PostCSS 来编译，增加构建过程的复杂性。
浏览器兼容性受限： 目前仅部分浏览器支持 CSS Modules。

Scoped CSS

Scoped CSS 是一个基于 Sass 的 CSS 预处理器，使用唯一标识符来隔离样式。它为每个 CSS 选择器分配一个随机生成的标识符，确保样式仅应用于带有相应标识符的元素。

优点：

强大的样式隔离性： 唯一标识符防止样式影响其他元素。
代码可重用性高： Scoped CSS 也支持模块化和代码重用。
易于维护： 类似于 CSS Modules，Scoped CSS 促进了代码的可维护性。

缺点：

需要 Sass： Scoped CSS 需要 Sass 来编译，增加构建过程的复杂性。
浏览器兼容性受限： 目前仅部分浏览器支持 Scoped CSS。

比较

CSS Modules 和 Scoped CSS 在样式隔离和代码可重用性方面都非常出色。然而，它们在实施方式和适用场景上存在差异。

一般来说：

CSS Modules 更适合大型项目，需要强大的样式隔离性和代码可重用性。
Scoped CSS 更适合小型项目，需要更简单的实现方式和更好的浏览器兼容性。

示例

CSS Modules：

// module.css
.container {
  color: red;
}

// app.js
import styles from './module.css';

const App = () => {
  return <div className={styles.container}>Hello World</div>;
};

Scoped CSS：

// module.scss
:global(.container) {
  color: red;
}

// app.js
import styles from './module.scss';

const App = () => {
  return <div className={`${styles.container} my-container`}>Hello World</div>;
};