CSS Modules 是一种在 Web 开发中管理样式的方法，它能帮助我们解决多人协作开发中的样式冲突问题。在 Vue.js 中使用 CSS Modules，可以使我们更加高效地管理样式，并且代码更加模块化，易于维护。
什么是 CSS Modules
CSS Modules 是由 CSS 模块化开发小组提出的一种使用 CSS 文件的新规范。它的设计目的是将每一个 CSS 样式文件作为一个模块，通过加载 JavaScript 模块化开发工具来实现每个组件的样式与其他组件隔离。
CSS Modules 的主要特点：
- 模块化：每个 CSS 文件都被认为是独立的模块，隔离作用域，不会影响其他模块的样式
- 局部作用域： CSS Modules 可以实现在组件层面上，每个组件都有自己的命名空间，避免样式冲突
- 继承： CSS Modules 支持样式的继承，可以大大减少样式冗余
Vue.js 支持在单文件组件中使用 CSS Modules，只需要在 <style> 标签上添加 module 属性即可。
示例：
-- -------------------- ---- -------
----------
---- ------------
------ ------- -------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ------- -------
-
-
-
---------
------ -------
---- -
----------------- -----
-------- -----
-
---- -- -
------ ----
-
--------在上面的例子中，我们使用了 module 属性，将样式文件作为一个模块来使用。在样式文件中，我们通过 .app 选择器设置 background-color 和 padding，在 .app h1 选择器中设置 color。
在运行过程中，Vue.js 会自动将 app 类名添加到 <div> 标签中，使样式只作用于当前组件。
在 Vue.js 中使用样式继承
CSS Modules 还支持样式的继承。我们可以使用 composes 关键字来实现样式的继承，从而大大减少样式冗余。
示例：
-- -------------------- ---- -------
----------
---- ------------
------ ------- -------
-- --------------- ----------- ------ ---- -- ----- -- ---
------
-----------
--------
------ ------- -
------ -
------ -
-------- ------- --------
------------ ----- -- - ---- ----
-
-
-
---------
------ -------
---- -
----------------- -----
-------- -----
-
----- -
---------- -----
-
-- -- ----- -- --
--------- -
--------- -----
------- --- ----- -----
-------- ----
-
--------在上面的例子中，我们使用 composes 关键字将 .desc-box 样式继承了 .desc 样式，从而实现了样式的复用，并且大大减少了样式冗余。
总结
通过使用 CSS Modules，我们可以实现样式的模块化，避免样式冲突，更加高效地管理样式，让我们的代码更加易于维护。在 Vue.js 中使用 CSS Modules，只需要在 <style> 标签上添加 module 属性即可。同时，CSS Modules 还支持样式的继承，可以大大减少样式冗余。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c3b63183d39b48817a9c5d