CSS 过渡代码组织答案

【问题标题】：CSS Transitions code organisationCSS 过渡代码组织
【发布时间】：2012-04-01 09:14:42
【问题描述】：

这些天我正在试验 CSS 过渡。我正在尝试仅使用 CSS 构建动画网页。

一切正常，但我遇到了一个与组织相关的问题：我的 CSS 文件看起来很乱！如果客户要求我延迟特定动画或更改另一个动画的顺序 - 我需要一些时间才能找到正确的线路来执行此操作（片刻 = 太多）。

我可以将动画命令与纯设计 CSS 分开吗？我应该如何设计浏览器前缀 CSS（一行或几行）？更改动画速度必须像点击一样简单（但现在我需要输入 5 次）。

我很高兴听到一些关于 CSS Trnasitions 代码组织的想法。谢谢！

【问题讨论】：

您可以尝试使用 [Prefix free](leaverou.github.com/prefixfree) 的 js 库。其他方式你可以通过 contex(general.css,home.css,etc) 分离你的 css 文件并将它们与一些缩小器结合起来。
我使用 CSS 过渡进行横幅开发的经验是，我必须将 CSS 过渡与 javascript 结合起来，以保持我的 css 文件健全，并让我能够很好地控制何时以及如何发生某些事情。跨度>

【解决方案1】：

无论内容如何（转换规则等），CSS 文件都应该被组织起来，这有助于浏览器的解析和文件的一般可读性。请注意：

您应该根据规则规范和级联（显然）对 CSS 进行排序，同时尽可能聚合重复的规则。
强烈建议添加目录，参见article on CSS files organization 中的示例。
您最好按照google's 'make the web faster' article on payload 的建议以一致的方式（例如按字母顺序排列）对键值对进行排序。

【讨论】：