在開發Web應用程序時，我們需要應用大量的CSS樣式來控制網站的整體外觀。為了提高代碼重用性和維護性，我們需要將相關樣式抽象為函數并封裝起來。這樣有助于提高代碼的可讀性和維護性，減少代碼的重復。

下面是一個基于JavaScript函數封裝一個CSS樣式的示例：

function setStyle(selector, styles) {
var elements = document.querySelectorAll(selector);
for (var i = 0; i< elements.length; i++) {
for (var property in styles) {
elements[i].style[property] = styles[property];
}
}
}
// 調用setStyle函數
setStyle('p', {
'padding': '10px',
'font-size': '16px',
'color': '#333'
});

上面的代碼定義了一個setStyle函數，它接收兩個參數：selector和styles。selector是一個CSS選擇器，styles是一個包含要設置的CSS屬性和值的對象。

setStyle函數內部使用document.querySelectorAll方法獲取匹配selector的所有元素，并通過遍歷每個元素來設置指定的CSS樣式。這個過程中，我們使用for-in循環來遍歷styles對象中的所有屬性，并通過樣式對象的屬性值為每個元素設置對應的CSS樣式。

通過調用setStyle函數，可以很方便地設置一組CSS樣式，例如上面的例子中我們使用setStyle函數為所有的p元素設置了padding、font-size和color三個CSS屬性。

通過函數封裝CSS樣式，我們可以在整個應用程序中重復使用這些樣式，避免了對CSS樣式的重復定義和硬編碼。這不僅能夠提高代碼的可維護性，也能夠加快開發速度，提升開發效率。