vue中scoped vs css modules

注意：此文是默認你已經具有scoped和css modules的相關基礎知識，因此不作用法上的講解。

在vue中，咱們有兩種方式能夠定義css做用域，一種是scoped,另外一種就是css modules。
這兩種方式都能造成css做用域，從而避免樣式相互覆蓋的問題，而這兩種方式又有什麼區別呢？下面就來比較一下。

1. 編譯後的產物不一樣

• scoped

<style lang="stylus" scoped>
.black {
  height 100px
  width: 100px
  background: black
  }
</style>

它會爲元素增長一個惟一屬性(好比data-v-121dd74a)，以下圖

編譯後的產物爲

.black[data-v-121dd74a] {
    height: 2rem;
    width: 2rem;
    background: #000;
}

• css modules

<style lang="stylus" module>
.black {
  height 100px
  width: 100px
  background: black
}
</style>

它會完全改變class的名稱，生成諸如這樣的代碼

.src-views-Home-index---black---2O7Zl_0 {
    color: #00f;
}

2.樣式覆蓋

• scoped

使用scoped後，父組件的樣式不會滲透到子組件中，從而避免了樣式覆蓋的問題，可是，須要注意的是，全局的樣式仍然會影響到子組件的樣式。好比這樣：

能夠看到子組件的div既會受到自己black類的影響，也會受到全局black類的影響。而css modules就不存在這個問題。

• css modules

由於css modules是直接改變了類的名字，因此不會被全局的black類覆蓋。

這裏只能看到div自己的black類。

項目中使用哪種，仍是要根據狀況而定。客觀上講css modules更強大，可是寫法上可能會讓人一會兒接受不了。而scoped又能知足大多數狀況。因此還需項目的管理者自行斟酌了。

以上就是鄙人的一點偏見，不足之處還請指教。