css - 最佳实践 : Organizing CSS files within a large Backbone. js app，并占图像 Sprite ？

Question

我继承了一个 Backbone.js 应用程序，它有一个 3000 行的样式表。

我想将其重构为多个样式表(并可能开始使用像 SASS 这样的预处理器)。我还想开始为我的图像使用 CSS Sprite ，因为我相信这可以减少整整一两秒的加载时间。

是否有将大型 CSS 文件 Backbone.js 应用拆分为多个 CSS 文件的最佳实践？

如何组织我的规则和 sprite，以便在我添加新图像时，sprite 生成器“优化”sprite 的空间布局，我不必寻找每个选择器并更改背景-位置坐标？

我正在考虑保留一个单独的“sprites.css”文件(它会被缩小并连接用于生产部署)，它只包含所有位置和高度/宽度值。

谢谢。

Answer 1

关于开发时组织拆分成多个sass文件的问题:

• 尝试 http://patternlab.io/ ，可以在此处找到演示:http://demo.patternlab.io/ , 作为灵感。

• 另一个建议是 outline这是前端的骨架。 (我用的)

• 看看OOCSS concept

这只是文件组织，但这可能会为您节省一些 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 整理你的 css , 会有很大帮助

对于 Sprite ，到目前为止我唯一的想法是SassyJson (对于 Sass)这是相对较新的。

这就是我所做的，我相信您可以更深入地进行优化，但我想这是一个好的开始。