CSS 中，模板經常被用于重復性的設計元素，像導航、頁腳和標頭。模板使得我們可以寫出很少的 CSS 代碼來實現這些元素的樣式，以及避免寫重復代碼。

為了使用模板，我們可以先通過 <link> 或 <style> 標簽導入模板。然后，在 HTML 文件中，我們可以使用 <template> 標簽來定義模板的內容。

<link rel="stylesheet" href="path/to/template.css">
或
<style>
@import url('path/to/template.css');
</style>
<template id="nav">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</template>

使用模板的方法有很多，但最常見的是使用 <template> 元素的內容克隆元素。我們可以使用 JavaScript 選擇 <template> 元素，然后通過調用 <template> 的 .content 屬性來獲取模板的內容，并將其轉換為 DOM 節點。

<script>
var navTemplate = document.querySelector('#nav');
var nav = navTemplate.content.cloneNode(true);
document.body.appendChild(nav);
</script>

在這個例子中，我們選擇了 ID 為 "nav" 的 <template> 元素。然后，我們使用 .content 屬性訪問模板的內容，并使用 .cloneNode(true) 將模板內容的副本轉換為 DOM 元素。最后，我們將克隆的元素添加到頁面的 body 元素中。

要避免模板濫用，我們應該只使用模板來重復使用頁面元素，而不是將其用于單個元素或小段樣式。這樣，我們可以大大減少代碼的復雜度，從而提高代碼的可維護性。