我继承了一个 Backbone.js 应用程序，它有一个包含 3000 行的样式表。
我想将其重构为多个样式表（并且可能开始使用像 SASS 这样的预处理器）。我还想开始为我的图像使用 CSS 精灵，因为我相信这可以减少一两秒的加载时间。
是否有将大型 CSS 文件 Backbone.js 应用程序拆分为多个 CSS 文件的最佳做法？
如何组织我的规则和精灵，这样当我添加新图像时，精灵生成器会“优化”精灵的空间布局，我不必寻找每一个选择器并更改背景-位置坐标？
我正在考虑保留一个单独的“sprites.css”文件（它将被缩小并连接用于生产部署），其中仅包含所有位置和高度/宽度值。
谢谢。
【问题讨论】：
标签： css backbone.js css-sprites sprite-sheet
关于开发时组织拆分成多个sass文件的问题：
试试http://patternlab.io/，可以在这里找到演示：http://demo.patternlab.io/，作为灵感。
另一个建议是outline，它是前端的骨架。 （我用什么）
这只是文件组织，但这可能会为您节省一些 css 行。 更重要的是，这将有助于可维护性和不要重复自己。
作为优化建议：
我将我的 sass 文件编译成页面特定的 css：homepage.css 将需要 core.sass 导入每个页面的基本需求 + homepage.sass 导入内容文件。您当然可以根据自己的需要拆分它。
您可以做的另一件事是在
中加载 core.css（来自 core.sass）。然后在加载 dom 内容后异步加载 homepage.css（来自 homepage.sass）。如果您将 Backbone 与 Require.js 一起使用，请小心，因为 require.js 不会执行异步 css 文件（yepnope.js 会执行此操作，但加载顺序是同步的）。某处可能有一个适合您需求的 javascript 同步加载程序库。您甚至可以让 html 被加载，然后异步加载您的 css 文件。但是由于您的应用程序的内容将充满 Backbone Collection 或其他内容，我不确定最后一个选项是否符合您的需求。
重要的是只为每个页面加载所需的 css。
另一个建议，用csslint lint 你的css，会有很大帮助
对于精灵，我目前唯一的想法是SassyJson（对于 Sass），它相对较新。
这就是我所做的，我相信你可以更深入地进行优化，但我想这是一个好的开始。
【讨论】：
Sass 或 less 都是解决单一巨大 CSS 文件问题的好方法。 （不过，这与 Backbone 并没有真正的关系。它可以应用于任何基于 HTML 的项目。）
首先，您可以立即将单个文件分解为几个较小的文件，然后将它们导入主文件。在我的大多数项目中，我使用grunt 之类的构建工具将 Sass 或更少的源代码编译为单个 .css 文件以包含在 HTML 文件中，因此 CSS 只需要一个 HTTP 请求。
像 Sass/less 这样的 CSS 扩展语言还允许您使用变量来解决 CSS 精灵问题：创建一个包含精灵位置变量的文件，然后仅使用 Sass 规则中的变量。当精灵位置发生变化时，只需更新变量并重新编译。
最后，使用 Sass/less 可以让您从小处着手，然后根据需要逐渐重构更多内容。这样做的好处是可以毫不费力地立即产生有用的好处——比如，只需将大的 CSS 文件分成几个较小的文件——然后随着时间的推移添加更多高级功能，比如重构以使用变量、宏和嵌套的 CSS 规则.
【讨论】：