Vue中使用scoped或css module

2018年09月26日Web前端0

一直只是用scoped，发现既有好处，也有不爽的，对比css module，来看下各自的特点。

一、scoped

scoped是用于css模块化的，他是为了不让当前组件的样式修改其他地方的样式，防止样式覆盖、污染问题的。 简单的实现：

<template>
    <div class="box">
    </div>
</template>
<style scoped>
.box {
    width: 10px
    p {
        color: red;
    }
}
</style>

实际编译后在浏览器中查看效果，html的：

calss为box的被增加了data-v-469af010这属性，元素和样式之间有了唯一的关联，scoped的作用就达到了。当然你会发现，内部的样式是没有增加额外属性的。

当然，使用scoped方法也是有弊端的，比如：

  • 编译消耗性能，实际浏览器解析的时候也比较耗性能，因为属性选择器的性能是比较差的。
  • 编译后的文件增加了大量的属性代码，增大了html和css文件。
  • 如果有公有样式时，复用性不高，其他模块中使用时无法获得该样式。
  • 当要特殊定制某组件时，由于css权重问题，需要增加额外的选择器来覆盖。
  • 由于有唯一属性，所以当前页面上不存在的元素无法生效。
  • 由于css权重问题，子组件样式可能被改掉的问题。

试下子组件样式被覆盖的问题，父组件如下：

<template>
    <div class="box">
        <aa class="color-yellow"></aa>
    </div>
</template>
<style scoped lang="less">
.box {
    .color-yellow {
        color: yellow;
    }
}

子组件如下，

<template>
    <span class="color-olive">hello</span>
</template>
<style scoped>
.color-olive {
    color: olive;
}
</style>

浏览器中显示的是黄色，查看该元素的样式情况：

于是子组件内部定义的样式被覆盖了。

注：不嵌套在box内的话是不会出现子组件样式被覆盖的情况，但是子组件也得带上scoped增加权重。

二、css module

css module是css模块化的一种方案，直接看实际效果，

<template>
    <div :class="$style['color-yellow']">
        11
        <p :class="$style.color">222</p>
    </div>
</template>
<style module lang="less">
.color {
    color: blue;
}
.color-yellow {
    color: yellow;
}
</style>

和scoped类似，但是引用该样式的元素需要修改下。

注：带-（横岗）的样式要特殊下，在class中时，以字符串取值的方式去获取。

浏览器中看下效果：

css module是完全将class名修改掉的方式去处理的，也能够唯一匹配。

当然还有其他的特性，可以自己去研究下。

vue-loader也有关于使用css module的文档：https://vue-loader-v14.vuejs.org/zh-cn/features/css-modules.html 也可以上github看下css module的文档：https://github.com/css-modules/css-modules

CSS ModuleVue

目录