JQuery UI网站的CSS规划（小部件和页面如何协同工作）

Question

我们已经构建了一个广泛使用JQuery UI的AJAX网站。 我们有30多个自制的JQuery UI小部件（它们是动态加载的）。我们使用JQuery原生小部件：Dialog，slider，datepicker。 我们使用JQGrid - 最新版本，它是在JQuery之上构建的css-wise。 我们的网站由一个框架和大约20页组成。

我想到了一些可能导致未来一塌糊涂的问题，并且我们有一些时间在我们的手中进行清理，因此我想征求一些建议。

1. CSS类命名：对于现在的我们的小部件CSS命名从jQuery UI的主题分离（我们不使用jQuery的用户界面的类标题/头和这样的）。这种方法有哪些优点&？
2. 包括我们有很多很多的CSS和JS包括（有没有推荐的依赖注入插件？）
3. 少CSS我读到这个剧本，如CSS的方法。我们的系统是中型的，但是在可能不可避免地复杂的那一天正在增长。我们应该迁移吗？
4. 自定义CSS小部件：可以说我们在我们的网站上有4个不同的对话框。什么是创建4种不同外观的最佳方法&感觉jQuery UI对话框？

非常感谢，

Answer 1

我正好在同一条船上，你，但我认为我们采取了不同的道路。也许我的一些想法可以帮助你的项目。

我的应用程序（用于营销自动化）使用Jquery UI选项卡进行设置，因此我可以使用我所称的包含“init”文件的主索引页。一个管理点，一个​​变化点，大大简化了事情。我辩论了根据我需要什么元素来做某种自动加载器或条件加载，但是我得出这样的结论：缓存是我的朋友，为此我只需要预先加载所有文件的“命中”。话虽如此，我已经将较小的脚本组合成一个较大的JS文件，以减少HTTP命中量。这是一个大型应用程序，它使用大量的jQuery和CSS，但加载速度不及其他主要网站，比如CNN或ESPN ......实际上，我认为它比使用大量愚蠢的Flash和视频的网站要快。

我选择广泛使用Themeroller（以及相关的Jquery UI命名方案），并且实际上是为我的自定义元素利用整合器样式。缺点是它将你锁定在非常一致的风格中，如果你有一个客户想要所有不同颜色的元素（是的，我现在正在处理这个事实，事实上），这可能会很麻烦。但是，所有的东西都可以在CSS中被覆盖，并且知道我可以通过上传一个不同的整合者主题来重新整理我的客户端的整个应用程序。这有助于我的应用程序在行业中脱颖而出，并使我能够使品牌重塑流程变得非常有利可图。

根据我在一家大型国际银行工作的经验，我选择不要缩减或做更少的CSS。在那里，我曾经在一个网站上工作，每天遭遇大约200万次，我实际上建议我们走这条路。这一要求向上移动了指挥系统，并且有些人的经验远远超过我的决定。为什么？简单。尽管他们只需通过缩小就可以在一天内完成数据传输，但他们决定在他们使用的SVN方案中进行缩小，然后快速更新可能会导致团队混淆。另外，由于我们都在应用程序中投入了大量硬件，所以很少有网站（甚至是大型网站）通过额外的工作获得了很多收益。当然，我们都希望我们的应用程序成为最先进的。但分析师推断，花在迁移到新计划和缩减工作上的额外时间会花在做其他功能上。我同意。因此，只需打开gzip压缩，确保您的CSS已精简（this is a great site for that）并与之配合使用。问题解决了。不要忘记，缓存在初始加载之后会再次起作用。

我打破了我自己的规则，试图充分利用Jquery UI的核心并使用Qtip进行对话。它们更强大，更成熟，可以随意单独造型。直到Jquery UI在他们的对话方案中得到一些进一步的发现之前，我个人才会坚持下去。我强烈建议检查一下。

最后，有一件事真的帮助我的应用程序广泛使用DataTables作为网格。我在我的应用中处理了大量数据 - 一个客户拥有超过500万条可能的记录。 DataTable不仅能够很容易地呈现数据，而且还可以通过Ajax“管理”负载，为用户提供令人难以置信的快速查询体验。与大多数网格一样，它只给我几行代码进行排序，分页，过滤和排序。而且，除了我所做的其他事情之外，DataTables还将我的应用程序与众不同。我绝对推荐看看它。

祝你好运。