站長資訊網(wǎng)本篇文章給大家?guī)砹藄coped css和css module的區(qū)別的相關(guān)知識，scoped css和css module都是為了控制css的局部作用域，防止類名重復(fù)等問題，那么兩者有什么區(qū)別呢，希望對大家有幫助。
前言
scoped css和css module都是為了控制css的局部作用域，防止類名重復(fù)等問題。那么兩者有什么區(qū)別呢？
一、css module
1.1.解釋
為所有類名重新生成類名，有效避開了css權(quán)重和類名重復(fù)的問題。css module直接替換了類名，排除了用戶設(shè)置類名影響組件樣式的可能性，這樣就不必為了命名絞盡腦汁。
1.2實(shí)現(xiàn)原理
通過給樣式名加hash字符串后綴的方式，實(shí)現(xiàn)特定作用域語境中的樣式編譯后的樣式在全局唯一。
1.3使用方法
- 在webpack.base.conf.js文件中，向 css-loader 傳入 modules: true 來開啟CSS Module。localIdentName 是設(shè)置生成樣式的命名規(guī)則。
//webpack.base.conf.jsmodule: { rules: [ // ... 其它規(guī)則省略 { test: /.css$/, use: [ 'vue-style-loader', { loader: 'css-loader', options: { // 開啟 CSS Modules modules: true, // 自定義生成的類名 localIdentName: '[local]_[hash:base64:8]' } } ] } ] }
- 在 < style >標(biāo)簽添加 module 屬性
<style module>.red { color: red;}.bold { font-weight: bold;}</style>
- 在vue模板中通過一個動態(tà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" // 一個基于文件名和類名生成的標(biāo)識符 }}</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)
- 在處理動畫animation的關(guān)鍵幀keyframes，動畫名稱必須先寫。比如，animation: deni .5s,能正常編譯; animation: .5s deni, 則編譯異常
- 記得配置css-loader，否則不會生效。
- 若使用的是style-loader，則需配置更換為vue-style-loader才可生效。
- css modules如何解決權(quán)重問題？
允許通過重命名或命名空間來封裝樣式規(guī)則，減少對選擇器的約束，從而達(dá)到不需要特定方法就可舒服的使用類名。
當(dāng)樣式規(guī)則耦合到每個組件時，當(dāng)不再使用組件時，樣式也會被移除。
二、Scoped
2.1實(shí)現(xiàn)原理
vue通過在DOM結(jié)構(gòu)以及css樣式上加唯一不重復(fù)的標(biāo)記，以保證唯一，達(dá)到樣式私有化模塊化的目的。無法完全避開css權(quán)重和類名重復(fù)的問題。
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)
- 如果用戶在別處定義了相同的類名，也許還是會影響到組件的樣式。
- 根據(jù)css樣式優(yōu)先級的特性，scoped這種處理會造成每個樣式的權(quán)重加重,引用 使用了scoped的組件
作為子組件，修改子組件的樣式變得很難，可能迫不得已只能用！important - scoped會使 標(biāo)簽選擇器 渲染變慢很多倍，用標(biāo)簽選擇器時scoped會嚴(yán)重降低性能，而使用class或id則不會
三、總結(jié)
css module實(shí)際效果要比scoped較好，而且css module配置并不難，所以我更推薦css module。
（學(xué)習(xí)視頻分享：css視頻教程）
