CSS Modules：从工程搭建到设计哲学

2023-12-10 11:10:14

搭建工程

安装依赖

首先，我们需要安装 CSS Modules 的依赖项：

npm install --save-dev css-modules-loader postcss-loader

配置webpack

然后，我们需要在 webpack 的配置文件中添加 CSS Modules 的配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'css-modules-loader',
        ],
      },
    ],
  },
};

创建组件

接下来，我们可以创建一个组件，并在组件的样式文件中使用 CSS Modules：

// MyComponent.vue
<template>
  <div class="my-component">
    Hello World!
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
};
</script>

<style lang="css" module>
.my-component {
  color: red;
}
</style>

使用组件

最后，我们可以将组件添加到我们的应用程序中：

// App.vue
<template>
  <div>
    <MyComponent />
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  name: 'App',
  components: {
    MyComponent,
  },
};
</script>

CSS Modules 的设计哲学

CSS Modules 的设计哲学是基于以下几个原则：

模块化： CSS Modules 允许您将样式与组件隔离，从而提高代码的可维护性和重用性。
样式隔离： CSS Modules 确保每个组件的样式只影响该组件本身，不会影响其他组件的样式。
命名约定： CSS Modules 使用命名约定来确保每个组件的样式都具有唯一性，从而避免样式冲突。

CSS Modules 的最佳实践

以下是一些使用 CSS Modules 的最佳实践：

使用单一的 CSS 文件： 每个组件应该只使用一个 CSS 文件，这样可以避免样式冲突。
使用命名约定： 使用命名约定来确保每个组件的样式都具有唯一性，从而避免样式冲突。
避免使用全局样式： 避免使用全局样式，因为全局样式会影响所有组件的样式，从而难以维护。
使用 CSS 预处理器： 使用 CSS 预处理器可以帮助您编写更简洁、更易维护的样式代码。
使用 CSS Modules 的工具： 有许多工具可以帮助您使用 CSS Modules，例如 stylelint 和 postcss-modules。