在 Javascript 和 CSS 之间保持 DRY

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 无法处理或无法跨浏览器处理的事情，例如动画。