在Vue中使用CSS時(shí)，我們可以將樣式單獨(dú)編寫(xiě)并使用單獨(dú)的文件來(lái)引入。這樣做的好處是可以讓CSS更加清晰明確，使得代碼更加易于維護(hù)。

/* app.vue */
<template>
<div class="container">
<p class="text">Hello World!</p>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
<style src="./style.css"></style>
/* style.css */
.container {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.text {
font-size: 24px;
font-weight: 600;
color: #333;
}

在這個(gè)例子中，我們將樣式單獨(dú)編寫(xiě)在style.css文件中，并通過(guò)<style>標(biāo)簽將其引入到了app.vue組件中。這使得我們的代碼更加整潔，易于管理。

另外，我們還可以使用scoped屬性來(lái)讓樣式只作用于當(dāng)前組件，避免全局污染的問(wèn)題。

/* app.vue */
<template>
<div class="container">
<p class="text">Hello World!</p>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
<style scoped>
.container {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.text {
font-size: 24px;
font-weight: 600;
color: #333;
}
</style>

在這個(gè)例子中，我們使用了scoped屬性將樣式限制在當(dāng)前組件中，這樣做可以讓我們的樣式更加安全，避免出現(xiàn)意外的全局污染。

總之，在Vue中使用CSS時(shí)，我們可以將樣式單獨(dú)編寫(xiě)并使用單獨(dú)的文件來(lái)引入，也可以使用scoped屬性來(lái)讓樣式只作用于當(dāng)前組件。這樣做既可以讓我們的代碼更加整潔易于管理，也可以使我們的樣式更加安全可靠。