Vue中CSS模块化最佳实践

Vue风格指南中介绍了单文件组件中的Style是必须要有作用域的，否则组件之间可能相互影响，造成难以调试。

在Vue Loader Scope CSS和Vue Loader CSS Modules两节中介绍了Vue实现CSS模块化的两种方式。

下面对scoped和CSS Modules两种方式分别进行介绍，然而这两种方式均非最佳实践。

一、scoped

使用scoped会为组件中HTML树的每个元素都添加data-xxxx属性，其中xxxx是哈希值。转换之后的CSS变成

mySelector[data-xxxx]{
   ....
}

scoped的缺点是很多的：

• 低效。scoped实现方式是为每个元素添加data-xxxx属性，这会造成CSS选择器变得复杂，造成DOM树冗余，不利于浏览器快速渲染。

二、使用CSS Modules

使用scoped比较简单，使用modules需要改三个地方。

（1）在webpack中开启CSS的modules选项

最简单的配置如下所示：

// webpack.config.js
{
  module: {
    rules: [
      // ... 其它规则省略
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              // 开启 CSS Modules
              modules: true,
              // 自定义生成的类名
              localIdentName: '[local]_[hash:base64:8]'
            }
          }
        ]
      }
    ]
  }
}

但是，以上这个配置是有问题的：它对全部css都应用modules，而我们只想在vue组件中使用modules。当使用Element时，引用Element自带的CSS之后会发现不生效。这时，应该采用如下配置：

// webpack.config.js -> module.rules
{
  test: /\.css$/,
  oneOf: [
    // 这里匹配 `<style module>`
    {
      resourceQuery: /module/,
      use: [
        'vue-style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: true,
            localIdentName: '[local]_[hash:base64:5]'
          }
        }
      ]
    },
    // 这里匹配普通的 `<style>` 或 `<style scoped>`
    {
      use: [
        'vue-style-loader',
        'css-loader'
      ]
    }
  ]
}

（2）在Vue组件中的template部分

<template>
  <p :class="$style.red">
    This should be red
  </p>
</template>

（3）在Vue组件中的style部分

<style module>
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
</style>

CSS Modules总结

我们的目的是让组件内部的CSS样式不污染全局。

Vue中CSS Module的写法缺点太多，令人难以忍受：

• 写起来复杂，每个class都需要带上$style，实际上这个过程可以自定义函数来实现，完全不需要使用CSS Modules
• 可读性差，代码长度变长，$style使得代码冗余很多

三、最佳实践

最佳实践包括三方面：

• 使用less
• 组件的根元素设置为一个特殊的class
• style块中的内容形如

.someComponent{
    ...
}

这种方式写起来简洁，实现也简单，是一种非常完美的写法。