JavaScript（簡稱JS）是一種強大的編程語言，它可以通過封裝CSS樣式來實現更具動態性和可擴展性的頁面效果。

JS可以通過DOM（文檔對象模型）訪問和修改HTML和CSS，因此我們可以使用JS來動態地修改CSS樣式，不需要重載整個頁面。

我們可以將一組CSS樣式封裝為一個JavaScript類或對象，根據需要在整個項目中重用它們。這樣做的好處是可以減少重復的代碼，提高代碼的可重用性和可維護性，而且我們可以按需添加、刪除或修改樣式。

下面是一個演示如何使用JS封裝CSS樣式的例子：

class CSS {
constructor(selector, rules) {
this.selector = selector;
this.rules = rules;
this.style = document.createElement('style');
this.style.appendChild(document.createTextNode(''));
document.head.appendChild(this.style);
}
add() {
let rule = `${this.selector} {`;
Object.keys(this.rules).forEach((key) =>{
rule += `${key}: ${this.rules[key]};`;
});
rule += `}`;
this.style.sheet.insertRule(rule, 0);
}
remove() {
for(let i=0;i{
css.remove();
}, 5000);

在這個例子中，我們定義了一個CSS類，它接受兩個參數：選擇器和規則。我們定義了兩個方法：add方法將CSS樣式添加到頁面中，remove方法從頁面中刪除CSS樣式。

在添加樣式時，我們將選擇器和規則放在一個字符串中，其中包含CSS規則的鍵和值。我們使用sheet.insertRule方法將樣式規則添加到樣式表中。

當然，這只是JS封裝CSS樣式的一種方法，你可以根據自己的需要選擇其他更適合的方法。