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又能滿足大多數情況。所以還需專案的管理者自行斟酌了。

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