CSS Modules 与 scoped 的不同

时间 2019-11-21

标签 css modules scoped 不同栏目 CSS 繁體版

原文原文链接

What ?

css 的做用域表现。css

Css modules

是一个CSS文件，其中全部类名和动画名称默认为局部做用域。
使用JS编译原生的CSS文件，使其具有模块化的能力，该文件须要import使用。

Scoped

在vue文件中的style标签上，有一个特殊的属性：scoped。
此样式仅适用于当前组件元素，从而使组件之间的样式不互相污染。

How ?

Css modules

实现原理html

经过给样式名加hash字符串后缀的方式，实现特定做用域语境中的样式编译后的样式在全局惟一。vue

具体效果demowebpack

// webpack.config.js
{
  test: /\.css$/,
  loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 
}

编译前 - vue 环境
<template>
  <div :class="$style.green">demo demo</div>
</template>

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

编译后 - vue 环境
<div class="green_3UI7s9iz">demo demo</div>

.green_3UI7s9iz {
 color: green;
}

因而可知git

css module直接替换了类名，排除了用户设置类名影响组件样式的可能性。优势就是没必要再担忧命名约定。
$style.green 是个变量，便可在js中引用，引用方式为：this.$style.green。
modules 即为启用，localIdentName 是设置生成样式的命名规则。

应用场景github

只应用于某个组件，其余组件不适用。web

⚠️ 注意点less

在处理动画animation的关键帧keyframes，动画名称必须先写：
- 好比，animation: deni .5s,能正常编译; animation: .5s deni, 则编译异常
css modules生效方式：
- 须要css-loader配置才能生效。
- 若使用的是style-loader，则需配置更换为vue-style-loader才可生效。

css modules如何解决权重问题？dom

容许经过重命名或命名空间来封装样式规则，减小对选择器的约束，从而达到不须要特定方法就可舒服的使用类名。ide

当样式规则耦合到每一个组件时，当再也不使用组件时，样式也会被移除。

Scoped

实现原理

vue经过在DOM结构以及css样式上加惟一不重复的标记，以保证惟一，达到样式私有化模块化的目的。

具体效果demo

// 编译前 demo.vue
<template>
  <div class="demo-c">hello world!</div>
</template>

<style lang="less" scoped>
  .demo-c {
    width: 100%;
    height: 100px;
    background-color: green;
    color: #fff;
  }
</style>

// 编译后-dom
<div data-v-48baf84c="" class="demo-c">hello world!</div>
// 编译后-css
.demo-c[data-v-48baf84c] {
  width: 100%;
  height: 1.333333rem;
  background-color: green;
  color: #fff;
}

应用场景

scoped css能够直接在能跑起来的vue项目中使用，且对应的样式只对该组件有效，不被其余组件污染。

⚠️ 注意点

“权重加剧”的意思：若是咱们要去修改这个样式，须要更高的权重去覆盖其样式。

因为css样式优先级的特性，scoped处理会形成每一个样式的权重加剧了。
若组件内部包含有子组件，只会给子组件的最外层标签加上当前组件的data属性：
- 通常父组件若是加了scoped，会比已设置过本身样式的子组件内除最外层标签的内层标签的权重低，因此不会影响他们的样式。
scoped会使标签选择器渲染变慢更多倍。
若用户再定义了相同的类名，也有可能会影响到组件的样式。
具备scoped属性的样式只会应用到当前元素和其子元素。Inline样式仍然比scoped样式优先级高，因此，最好避免使用inline样式。

Why ?

目的

css 模块化
css 私有化：不被污染
css 复用性
解决CSS中的全局做用域问题

总结

实现同一目的，比较它们的优缺点，css modules 配置并不麻烦且实现的总体效果更优于scoped css，在此我的更推荐使用css modules。

参考资料