Vue中的CSS Deep

一、深入了解CSS Deep

CSS deep或者叫做/deep/、>>> 和 ::v-deep，用於給子組件的樣式添加一個全局作用域。在Vue中，它被廣泛運用在scoped CSS中，以擴大樣式的作用範圍。

舉個例子，在Vue的組件中添加樣式如下：

<template>
  <div class="parent">
    <div class="child">I am a child</div>
  </div>
</template>

<script>
export default {
  name: 'ParentComponent'
}
</script>

<style scoped>
.parent {
  color: blue;
}
.child {
  font-size: 20px;
}
</style>

樣式在組件中會被編譯成如下代碼：

.parent[data-v-f3f3eg9] {
  color: blue;
}
.parent[data-v-f3f3eg9] .child {
  font-size: 20px;
}

這時候，如果要給子組件的樣式添加和父組件同樣的scoped樣式，只需要在子組件中添加/deep/或者>>>，如下：

<template>
  <div class="parent">
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  name: 'ParentComponent',
  components: { ChildComponent }
}
</script>

<style scoped>
.parent {
  color: blue;
}
/deep/ .child {
  font-size: 20px;
}
</style>

這樣，子組件的樣式就會被編譯成如下代碼：

.parent[data-v-f3f3eg9] {
  color: blue;
}
.parent[data-v-f3f3eg9] .child[data-v-f3f3eg9] {
  font-size: 20px;
}

二、解決scoped CSS樣式穿透問題

在Vue中，scoped CSS可以保證組件的樣式不會影響到其他組件，但是也有可能會碰到需要影響到其他組件的情況。這時候，可以使用CSS deep來解決scoped CSS樣式穿透問題。

例如，父組件和子組件都有自己的樣式，但是需要影響到另一個組件。這時候使用CSS deep可以輕鬆實現，如下：

<template>
  <div class="parent">
    <p class="parent-text">I am a parent</p>
    <div class="child">
      <p class="child-text">I am a child</p>
      <GrandchildComponent />
    </div>
  </div>
</template>

<script>
import GrandchildComponent from './GrandchildComponent.vue'

export default {
  name: 'ParentComponent',
  components: { GrandchildComponent }
}
</script>

<style scoped>
.parent {
  color: blue;
}
.child {
  font-size: 20px;
}
/deep/ .grandchild {
  font-weight: bold;
}
</style>

<!--在GrandchildComponent.vue中-->

<template>
  <div class="grandchild">
    <p class="grandchild-text">I am a grandchild</p>
  </div>
</template>

<script>
export default {
  name: 'GrandchildComponent'
}
</script>

<style scoped>
.grandchild {
  color: red;
}
/deep/ .parent-text {
  font-style: italic;
}
</style>

這樣，.grandchild樣式就只會作用在GrandchildComponent組件內，而/deep/ .parent-text樣式可以修改父組件的樣式。

三、推薦使用CSS modules替換CSS deep

雖然CSS deep可以擴大組件中樣式的作用範圍，但是容易造成全局樣式混亂和耦合，所以在實際開發中，推薦使用CSS modules替換CSS deep。

CSS Modules是一種基於CSS的加載器，在編寫CSS時可以局部作用域，解決了全局作用域的衝突問題，避免了CSS混亂的情況。

在Vue項目中使用CSS modules非常方便，只需要在style標籤中添加module即可：

<template>
  <div class="parent">
    <p class="parent-text">I am a parent</p>
    <div class="child">
      <p class="child-text">I am a child</p>
      <GrandchildComponent />
    </div>
  </div>
</template>

<script>
import GrandchildComponent from './GrandchildComponent.vue'

export default {
  name: 'ParentComponent',
  components: { GrandchildComponent }
}
</script>

<style module>
.parent {
  color: blue;
}
.child {
  font-size: 20px;
}
.grandchild {
  color: red;
}
.parentText {
  font-style: italic;
}
</style>

然後在組件中使用樣式，只需要在樣式後添加’$style’，如：

<template>
  <div :class="$style.parent">
    <p :class="$style.parentText">I am a parent</p>
    <div class="child">
      <p class="child-text">I am a child</p>
      <GrandchildComponent />
    </div>
  </div>
</template>

<script>
import GrandchildComponent from './GrandchildComponent.vue'

export default {
  name: 'ParentComponent',
  components: { GrandchildComponent }
}
</script>

<style module>
.child {
  font-size: 20px;
}
.grandchild {
  color: red;
}
.parentText {
  font-style: italic;
}
</style>

這樣，在編寫CSS時就不需要擔心全局作用域問題，同時也提供了更好的可維護性。