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還將我的應用程序與衆不同。我絕對推薦看看它。

祝你好運。