Javascript和CSS之間保持乾燥

Question

假設你有一個菜單，用一個按鈕來打開和關閉。我這樣做的標準方法是編寫一個關閉菜單的CSS，並編寫指定（或動畫）打開的菜單狀態的Javascript。

最近我進入了Active.js，一個客戶端MVC框架。它爲視圖類提供了用於製作DOM片段的構建器，並且可以爲這些片段提供處理動畫和DOM狀態等方面的方法。

在CSS中描述初始狀態，然後在JavaScript中描述替代狀態時，感覺有些奇怪。如果沒有動畫，只需在CSS中完成所有操作並僅使用JavaScript來添加或刪除DOM類就是明智之舉。

我的另一個想法是在JSON（而不是CSS）中描述DOM對象的所有狀態（摺疊，展開，紅色，綠色），並給我的ActionView對象方法在這些狀態之間進行動畫處理。有人這樣做嗎？其他想法？

Answer 1

就動畫而言，在CSS中具有基本樣式並且在JavaScript中無法在純CSS中實現的動畫或樣式不會違反DRY，因爲您仍然沒有任何重複如果做得對。如果你認爲它是一種更「純粹」的做法，你可以嘗試在JavaScript或CSS中保留更多的樣式，但這些只是你使用的語言，如果你認爲它們都是同一個底層DOM的表達式，適合在任何需要的地方使用更具表現力或兼容的語言。

我通常會盡量使用CSS，然後開始使用jQuery來完成CSS無法處理或不能跨瀏覽器（如動畫）的事情。