我继承了一个 Backbone.js 应用程序,它有一个 3000 行的样式表。
我想将其重构为多个样式表(并可能开始使用像 SASS 这样的预处理器)。我还想开始为我的图像使用 CSS Sprite ,因为我相信这可以减少整整一两秒的加载时间。
是否有将大型 CSS 文件 Backbone.js 应用拆分为多个 CSS 文件的最佳实践?
如何组织我的规则和 sprite,以便在我添加新图像时,sprite 生成器“优化”sprite 的空间布局,我不必寻找每个选择器并更改背景-位置坐标?
我正在考虑保留一个单独的“sprites.css”文件(它会被缩小并连接用于生产部署),它只包含所有位置和高度/宽度值。
谢谢。
最佳答案
关于开发时组织拆分成多个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 整理你的 css , 会有很大帮助
对于 Sprite ,到目前为止我唯一的想法是SassyJson (对于 Sass)这是相对较新的。
这就是我所做的,我相信您可以更深入地进行优化,但我想这是一个好的开始。
关于css - 最佳实践 : Organizing CSS files within a large Backbone. js app,并占图像 Sprite ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22850751/