我繼承了一個帶有3000行的樣式表的Backbone.js應用程序。最佳實踐：在大型Backbone.js應用程序中組織CSS文件，並計算圖像精靈？
我想重構爲多個樣式表，這（也許開始使用像SASS預處理器）。我也想開始爲我的圖片使用CSS精靈，因爲我相信這可以減少整整一兩個載入時間。
是否存在將超級CSS文件Backbone.js應用程序拆分爲多個CSS文件的最佳做法？
怎麼樣組織我的規則和精靈，以便當我添加一個新的圖像，精靈生成器「優化」精靈的空間佈局，我不必追捕每一個選擇器，並改變背景位置座標？
我想保持一個獨立的「sprites.css」文件（它會得到微細化以及連接起來進行生產部署），僅僅包含了所有的位置和高度/寬度值的。
謝謝。
無論是無禮或less將是解決單巨大，CSS文件問題的好方法。 （但這並不是真的與Backbone相關，它可能適用於任何基於HTML的項目。）
要開始，您可以立即將單個文件分解爲幾個較小的文件，然後將其導入主文件。在我的大部分項目中，我使用像grunt這樣的構建工具將Sass或更少源代碼編譯成單個.css文件以包含在HTML文件中，因此CSS只需要一個HTTP請求。
的CSS擴展語言，如薩斯/少也讓您使用變量來解決CSS精靈問題：建立與精靈位置變量的文件，然後在你的無禮規則只能使用變量。當精靈位置改變時，只需更新變量並重新編譯。
最後，使用薩斯/更少將讓你從小事做起，在第一，因爲你需要逐步重構多。這具有可以立即產生實用好處的優點，比如只需將大型CSS文件分成幾個較小的文件，然後隨着時間的推移添加更多高級功能，例如重構使用變量，宏和嵌套CSS規則。
對於發展中的問題時，分裂組織左右到多個青菜文件：
嘗試http://patternlab.io/，演示可以在這裏找到：http://demo.patternlab.io/，作爲靈感。
另一個建議是outline其前端的骨架。 （我用的）
這只是文件的組織，但可能會節省你的CSS的一些線路。 不僅如此，這將有助於可維護性和不重複自己。
作爲建議優化：
我編譯我頂嘴文件到頁面特定的CSS：homepage.css需要core.sass其導入每個頁面+ homepage.sass的基本需要哪些導入文件內容。你當然可以根據自己的需要來分割它。
您可以做的另一件事是將core.css（來自core.sass）加載到<頭部>中。然後，一旦加載了dom內容，異步加載homepage.css（來自homepage.sass）。如果使用帶有Require.js的Backbone，請小心，因爲require.js不會執行異步css文件（yepnope.js會這樣做，但加載的順序是同步的）。可能有一個JavaScript同步加載程序庫可以滿足您的需求。
你甚至可以讓html被加載，然後異步加載你的（s）css文件。但由於您的應用程序的內容將充滿Backbone Collection或其他什麼，我不確定這最後的選項將適合您的需求。
重要的是隻爲每個頁面加載所需的CSS。
另一個suggesition，皮棉你的CSS與csslint，將有很大的幫助
對於精靈，唯一的念頭我到目前爲止是SassyJson（社科院），這是比較新的。
這就是我所做的，我相信你可以深入優化，但我想這是一個很好的開始。
感謝您的回覆，但這並沒有給我帶來任何新的東西。這並沒有回答我關於精靈友好CSS的問題（因爲添加一個新的圖像可以改變每個圖像的位置）。它也不提供有關將CSS有效提取到單獨文件中的提示（哪些規則屬於哪個文件）。 –