在Vue的組件化開發模式中，CSS也是一個非常重要的部分。隨著應用程序變得越來越復雜，為每個組件編寫獨立的CSS文件可能會變得非常困難，容易出現命名沖突，或者難以管理的情況。Vue的解決方法是將CSS和組件的JS代碼放在同一文件中。這種方式可以更好地組織代碼，使得代碼更靈活、易于重用，也更容易維護和理解。下面來詳細介紹Vue組件如何編寫CSS。

在Vue中，我們可以使用三種方式來編寫組件的CSS：

1. CSS文件：

<template>
<div class="example">
<p>Hello World</p>
</div>
</template>
<style src="./example.css"></style>

在template中，我們定義了一個class為"example"的div元素和一個p元素。通過在style標簽中導入example.css，我們可以定義這個組件中的CSS樣式：

.example {
background-color: red;
}
.example p {
color: white;
}

2. <style>標簽：

<template>
<div class="example">
<p>Hello World</p>
</div>
</template>
<script>
export default {
name: "example",
};
</script>
<style>
.example {
background-color: red;
}
.example p {
color: white;
}
</style>

在這種方式中，我們將CSS代碼直接放在<style>標簽中，這樣可以更方便地組織CSS代碼、更容易與組件JS代碼交互。但注意，如果組件變得更加復雜，CSS代碼也會變得越來越冗長，并且會變得難以維護。

3. CSS Modules：

<template>
<div :class="$style.example">
<p>Hello World</p>
</div>
</template>
<script>
import styles from "./example.module.css";
export default {
name: "example",
data() {
return {
$style: styles,
};
},
};
</script>

CSS Modules是一種基于CSS預處理器（如Sass、Less等）并結合webpack的技術。在Vue中，使用CSS Modules需要借助于vue-loader插件。$style是vue-loader插件生成的一個由類名映射到編譯后的唯一類名的對象。在template中，我們使用":class"指令將唯一類名與組件的類名連接起來。

總之，Vue提供了多種方式來編寫組件的CSS，根據你的項目和團隊的需要，選擇適合自己的方式即可。無論哪種方式，都可以通過模塊化管理CSS，使得CSS更加易于管理和重用，也更方便對CSS進行維護和修改。