我继承了一个Backbone.js应用程序，该应用程序有一个3000行的样式表。
我想将其重构为多个样式表（并且可能开始使用像SASS这样的预处理器）。我也想开始为我的图像使用CSS sprites，因为我相信这可以减少一两个完整的加载时间。
将mega-CSS文件Backbone.js应用程序拆分为多个CSS文件是否有最佳做法？
如何组织我的规则和精灵，以便在我添加新图像时，精灵生成器＆＃34;优化＆＃34;精灵的空间布局，我不必追捕每一个选择器并改变背景位置坐标？
我在考虑保持一个单独的＆＃34; sprites.css＆＃34;文件（它将缩小并连接到生产部署），它只包含所有位置和高度/宽度值。
感谢。
答案 0 :(得分：1)
有关在开发时组织拆分为多个sass文件的问题：
尝试http://patternlab.io/，可以在此处找到演示：http://demo.patternlab.io/，作为灵感。
另一个建议是outline，它是前端的骨架。 （我用的是什么）
这只是文件组织，但这可能会为您节省一些css。 更重要的是，这将有助于维护，不要重复自己。
作为优化建议：
我将我的sass文件编译成页面特定的css：homepage.css将需要core.sass，它导入每个页面的基本需求+ homepage.sass导入内容的文件。您当然可以根据自己的需要进行拆分。
您可以做的另一件事是在＆lt; head＆gt;中加载core.css（来自core.sass）。然后在加载dom内容后异步加载homepage.css（来自homepage.sass）。如果你使用Backbone和Require.js，要小心，因为require.js不会执行异步css文件（yepnope.js会这样做，但加载的顺序是同步的）。可能有一个javascript同步加载器库，可以满足您的需求。
您甚至可以加载html，然后异步加载您的（s）css文件。但是，由于您的应用程序的内容将填充Backbone Collection或其他任何内容，我不确定这最后一个选项是否符合您的需求。
重要的是只为每个页面加载所需的css。
另一个建议是用csslint来填充你的css，这将有很大的帮助
对于精灵，我到目前为止唯一的想法是SassyJson（对于Sass），这是相对较新的。
这就是我所做的，我相信你可以更深入地进行优化，但我认为这是一个很好的开始。
答案 1 :(得分：0)
Sass或less将是修复单个巨大CSS文件问题的好方法。 （但这与Backbone无关。它可以应用于任何基于HTML的项目。）
首先，您可以立即将单个文件拆分为几个较小的文件，然后在主文件中导入这些文件。在我的大多数项目中，我使用像grunt这样的构建工具将Sass或更少的源代码编译成单个.css文件以包含在HTML文件中，因此CSS只需要一个HTTP请求。
像Sass / less这样的CSS扩展语言也允许您使用变量来解决CSS精灵问题：创建一个包含精灵位置变量的文件，然后只使用Sass规则中的变量。当精灵位置改变时，只需更新变量并重新编译。
最后，使用Sass / less会让你从一开始就开始变小，然后根据需要逐步重构。这样做的好处是可以立即轻松地产生有用的好处 - 比如，只需将大的CSS文件拆分成几个较小的文件 - 然后随着时间的推移添加更多高级功能，例如重构使用变量，宏和嵌套的CSS规则。