Vue中scoped css和css module比較

scoped css

官方文檔

scoped css能夠直接在能跑起來的vue項目中使用。

使用方法：

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

使用scoped劃分本地樣式的結果編譯結果以下：

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

即在元素中添加了一個惟一屬性用來區分。

缺點

1、若是用戶在別處定義了相同的類名，也許仍是會影響到組件的樣式。

2、根據css樣式優先級的特性，scoped這種處理會形成每一個樣式的權重加劇了：

即理論上咱們要去修改這個樣式，須要更高的權重去覆蓋這個樣式。

因此在引用包含scoped的第三方插件時如若須要修改樣式則須要全局修改，並且要注意權重問題，0.0無可奈何再使用!important。

3、若是組件內部包含有其餘組件，只會給其餘組件的最外層標籤加上當前組件的data屬性：

因此通常父組件若是加了scoped，會比已經設置過本身樣式的子組件內除最外層標籤的內層標籤的權重低，影響不到他們的樣式。

不過也是能夠經過以下方法影響到的：

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