Vue中scoped css和css module比较

scoped css

官方文档

scoped css能够直接在能跑起来的vue项目中使用。

使用方法：

<style scoped>
h1 {
  color: #f00;
}
</style>

使用scoped划分本地样式的结果编译结果以下：

h1[data-v-4c3b6c1c] {
    color: #f00;
}

即在元素中添加了一个惟一属性用来区分。

缺点

1、若是用户在别处定义了相同的类名，也许仍是会影响到组件的样式。

2、根据css样式优先级的特性，scoped这种处理会形成每一个样式的权重加剧了：

即理论上咱们要去修改这个样式，须要更高的权重去覆盖这个样式。

因此在引用包含scoped的第三方插件时如若须要修改样式则须要全局修改，并且要注意权重问题，0.0无可奈何再使用!important。

3、若是组件内部包含有其余组件，只会给其余组件的最外层标签加上当前组件的data属性：

因此通常父组件若是加了scoped，会比已经设置过本身样式的子组件内除最外层标签的内层标签的权重低，影响不到他们的样式。

不过也是能够经过以下方法影响到的：

4、scoped会使标签选择器渲染变慢不少倍

官方给了一些注意事项以下：

咱们能够看到用标签选择器时scoped会严重下降性能，而使用class或id则不会。

css module

官方文档

css module须要增长css-loader配置才能生效，具体可看文档的实现。

注意

若是你使用的是style-loader，若是想让配置生效须要更换到文档所述的vue-style-loader（是vue-loader的一个依赖，无需单独安装）。

两者区别能够从这里了找vue-style-loader

使用以下：

<template>
  <p :class="$style.gray">
    Im gray
  </p>
</template>

<style module>
.gray {
  color: gray;
}
</style>

使用module的结果编译以下：

<p class="gray_3FI3s6uz">Im gray</p>

.gray_3FI3s6uz {
    color: gray;
}

因而可知，css module直接替换了类名，排除了用户设置类名影响组件样式的可能性。

这样$style.red就能够当作一个变量，而且能够在js中使用，以下：

<script>
export default {
  created () {
    console.log(this.$style.gray)
    // -> "gray_3FI3s6uz"
    // 一个基于文件名和类名生成的标识符
  }
}
</script>

咱们能够看到，module在使用时多出了绑定和$style，若是你想更优雅，能够看一下这个vue-css-modules。

css module父子组件问题

在使用scss并开启css module时发现一个问题

使用module的父组件会在没有使用module的子组件的全部根类上增长hash改变其类名，可能会形成子组件样式应用不上。

以下是没有开启css module子组件的样式：

<style lang="scss">
  .comp{
    color: palegoldenrod;
    p{
      color: black;
    }
  }
  .t {
    color: teal;
  }
  div {
    color: yellow;
  }
</style>

父组件开启css module后编译结果以下：

.comp_2tR6GNan {
  color: palegoldenrod;
}
.comp_2tR6GNan p {
  color: black;
}
.t_39GmF73s {
  color: teal;
}
div {
  color: yellow;
}

能够看到comp和t类都被修改了类名，若是根样式是标签选择器不会受影响。

因此在使用css module的父组件中使用的子组件也要开启css module。

使用css module在keyframes中的问题

使用CSS modules处理动画animation的关键帧keyframes，动画名称必须先写。

animation: ani 1s;能正常编译，而animation: 1s ani;则会编译的不符合预期，因此平时养成良好的css参数书写顺序也很重要。

总结

综上所述，css module前期进行不麻烦的配置，实现的效果比scoped css更优，这里推荐使用css module。