本篇文章給大家?guī)?lái)了scoped css和css module的區(qū)別的相關(guān)知識(shí)，scoped css和css module都是為了控制css的局部作用域，防止類名重復(fù)等問(wèn)題，那么兩者有什么區(qū)別呢，希望對(duì)大家有幫助。

前言

scoped css和css module都是為了控制css的局部作用域，防止類名重復(fù)等問(wèn)題。那么兩者有什么區(qū)別呢？

一、css module

1.1.解釋
為所有類名重新生成類名，有效避開(kāi)了css權(quán)重和類名重復(fù)的問(wèn)題。css module直接替換了類名，排除了用戶設(shè)置類名影響組件樣式的可能性，這樣就不必為了命名絞盡腦汁。
1.2實(shí)現(xiàn)原理
通過(guò)給樣式名加hash字符串后綴的方式，實(shí)現(xiàn)特定作用域語(yǔ)境中的樣式編譯后的樣式在全局唯一。
1.3使用方法

• 在webpack.base.conf.js文件中，向 css-loader 傳入 modules: true 來(lái)開(kāi)啟CSS Module。localIdentName 是設(shè)置生成樣式的命名規(guī)則。

//webpack.base.conf.jsmodule: {     rules: [       // ... 其它規(guī)則省略       {         test: /.css$/,         use: [           'vue-style-loader',           {             loader: 'css-loader',             options: {               // 開(kāi)啟 CSS Modules               modules: true,               // 自定義生成的類名               localIdentName: '[local]_[hash:base64:8]'             }           }         ]       }     ]   }

• 在 < style >標(biāo)簽添加 module 屬性

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

• 在vue模板中通過(guò)一個(gè)動(dòng)態(tài)類綁定來(lái)使用它

<template>   <p :class="$style.red">     This should be red  </p></template><template>   <p>     <p :class="{ [$style.red]: isRed }">       Am I red?     </p>     <p :class="[$style.red, $style.bold]">       Red and bold    </p>   </p></template>

• 在js中使用

<script>export default {   created () {     console.log(this.$style.red)     // -> "red_1VyoJ-uZ"     // 一個(gè)基于文件名和類名生成的標(biāo)識(shí)符   }}</script>

1.4使用效果

<template>  <p :class="$style.gray">  Im gray </p></template><style module>.gray {  color: gray;}</style>

編譯后結(jié)果：

//編譯結(jié)果<p class="gray_3FI3s6uz">Im gray</p>.gray_3FI3s6uz {  color: gray;}

1.5注意點(diǎn)

• 在處理動(dòng)畫(huà)animation的關(guān)鍵幀keyframes，動(dòng)畫(huà)名稱必須先寫(xiě)。比如，animation: deni .5s,能正常編譯; animation: .5s deni, 則編譯異常
• 記得配置css-loader，否則不會(huì)生效。
• 若使用的是style-loader，則需配置更換為vue-style-loader才可生效。
• css modules如何解決權(quán)重問(wèn)題？
  允許通過(guò)重命名或命名空間來(lái)封裝樣式規(guī)則，減少對(duì)選擇器的約束，從而達(dá)到不需要特定方法就可舒服的使用類名。
  當(dāng)樣式規(guī)則耦合到每個(gè)組件時(shí)，當(dāng)不再使用組件時(shí)，樣式也會(huì)被移除。

二、Scoped

2.1實(shí)現(xiàn)原理
vue通過(guò)在DOM結(jié)構(gòu)以及css樣式上加唯一不重復(fù)的標(biāo)記，以保證唯一，達(dá)到樣式私有化模塊化的目的。無(wú)法完全避開(kāi)css權(quán)重和類名重復(fù)的問(wèn)題。
2.2使用方法
在 < style >標(biāo)簽添加 scoped屬性
2.3使用效果

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

編譯后結(jié)果：

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

2.4缺點(diǎn)

• 如果用戶在別處定義了相同的類名，也許還是會(huì)影響到組件的樣式。
• 根據(jù)css樣式優(yōu)先級(jí)的特性，scoped這種處理會(huì)造成每個(gè)樣式的權(quán)重加重,引用 使用了scoped的組件
  作為子組件，修改子組件的樣式變得很難，可能迫不得已只能用！important
• scoped會(huì)使 標(biāo)簽選擇器 渲染變慢很多倍，用標(biāo)簽選擇器時(shí)scoped會(huì)嚴(yán)重降低性能，而使用class或id則不會(huì)

三、總結(jié)

css module實(shí)際效果要比scoped較好，而且css module配置并不難，所以我更推薦css module。

（學(xué)習(xí)視頻分享：css視頻教程）