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

标签 css backbone.js css-sprites sprite-sheet

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

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

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

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

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

谢谢。

最佳答案

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

这只是文件组织,但这可能会为您节省一些 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)这是相对较新的。

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

关于css - 最佳实践 : Organizing CSS files within a large Backbone. js app,并占图像 Sprite ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22850751/

相关文章:

CSS Sprite : An easy way to do a generic unordered list?

html - 为什么在响应式网页设计中使用 HTML5?

javascript - 拖放时显示位置和总数

css 不适用于 Web 内容中的内部文件夹 jsp

jquery - 带有主干js的 Jasmine 测试用例

css - 如何在 css 中实现无填充 Sprite ?

javascript - 如何在用户输入时显示提示框或工具提示?

javascript - backbone 从外部 json 填充集合

javascript - 如何使用backbone.js的多态性,特别是super的属性?

html - 让我制作的 CSS Sprite 工作的问题