JavaScript是前端Web開發中不可或缺的一部分，它為我們提供了許多強大的功能，其中動態控制CSS樣式便是其中之一。

首先，我們需要在HTML文件中引入JavaScript文件：

<script src="main.js"></script>

隨后，我們可以通過getElementById或getElementsByClassName等方法來獲取HTML元素，并動態地控制它們的CSS樣式，例如：

//獲取元素
var element = document.getElementById("example");
//修改樣式
element.style.color = "red";
element.style.backgroundColor = "blue";

我們也可以通過className來動態地添加或移除元素的CSS類，例如：

//獲取元素
var element = document.getElementById("example");
//添加樣式類
element.classList.add("new-class");
//移除樣式類
element.classList.remove("old-class");

在編寫JavaScript動態控制CSS樣式時，我們需要注意幾點：

• 避免直接修改元素的style屬性，而是應該通過添加或移除CSS類來實現樣式的改變。
• 應該盡量使用class而非id來定義元素的樣式，這樣有利于提高代碼的重用性。
• 不要過度使用JavaScript來修改CSS樣式，應該盡量在CSS中定義好樣式，避免頁面加載時因大量的JavaScript操作而導致的性能問題。

總的來說，JavaScript動態控制CSS樣式為我們提供了更加靈活的控制頁面樣式的方式，但是在使用時需要注意代碼的優雅性和性能問題。