Vue中scoped css和css module比较

scoped css

官方文档

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

使用方法:

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

使用scoped划分本地样式的结果编译结果如下:

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

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

缺点

一、如果用户在别处定义了相同的类名,也许还是会影响到组件的样式。

二、根据css样式优先级的特性,scoped这种处理会造成每个样式的权重加重了:

即理论上我们要去修改这个样式,需要更高的权重去覆盖这个样式。

所以在引用包含scoped的第三方插件时如若需要修改样式则需要全局修改,而且要注意权重问题,0.0迫不得已再使用!important

三、如果组件内部包含有其他组件,只会给其他组件的最外层标签加上当前组件的data属性:

所以一般父组件如果加了scoped,会比已经设置过自己样式的子组件内除最外层标签的内层标签的权重低,影响不到他们的样式。

不过也是可以通过如下方法影响到的:

四、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。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏LeoXu的博客

[翻译]Android教程-保存数据-支持不同的平台版本

展示 平台版本 的仪表盘会基于浏览过 Google Play Store的设备数量有规律的更新,来展示运行每一种版本Android的激活设备的分布. 一般...

712
来自专栏贺贺的前端工程师之路

如何使用chrome浏览器调试?

在chrome浏览器中打开http://localhost:3000,按F12,或者右击->单击【检查】.

822
来自专栏电光石火

如何查看网站页面错误的详细情况(调试)

打开浏览器,点击“工具”(或浏览器右侧齿轮图标),然后单击“internet选项”进入设置窗口。(这里指的是IE浏览器,其他浏览器一般不需要设置) ? 在弹出...

1775
来自专栏腾讯移动品质中心TMQ的专栏

【腾讯TMQ】Crash 之防测漏篇

做Android/iOS测试也有一段时间了,随着项目壮大,版本crash问题也越来越突出。如何有效地对crash进行预防拦截呢?请看下文。如何有效地对crash...

2570
来自专栏前端笔记

【HTML5 理论知识】就H5调试技巧,浅谈:iPhone X 适配方案!

image.png 2017年9月苹果发布了iPhone X机型,对于它的“刘海儿”和底部Home Indicator。我们可以通过以下三种方案进行适配~下...

4648
来自专栏小文博客

自适应免费开源主题——Dobby

1195
来自专栏全栈数据化营销

不用代码,10分钟会采集微博、微信、知乎、58同城数据和信息

 学会信息和数据快速采集都是非常必要的,因为这能大大提高工作效率。在学会python和火车头之前,web scraper是我最常用的采集工具了,设置简单,非常高...

3739
来自专栏腾讯移动品质中心TMQ的专栏

Crash之防测漏篇

做Android/iOS测试也有一段时间了,随着项目壮大,版本crash问题也越来越突出。如何有效地对crash进行预防拦截呢?请看下文。 1 APP闪退背后...

2168
来自专栏Samego开发资源

Chrome扩展开发入门体验

1664
来自专栏快乐八哥

Web Fundamentsals学习1-Multiple-Screen-Site

你的一个运行于多设备网站(Your First Multi-device Site) ? 遵循的步骤: 1.定义信息架构(information archite...

1799

扫码关注云+社区