最佳实践：在大型 Backbone.js 应用程序中组织 CSS 文件，并考虑图像精灵？

Posted 2023-03-25

【中文标题】最佳实践：在大型 Backbone.js 应用程序中组织 CSS 文件，并考虑图像精灵？

【英文标题】：Best practices: Organizing CSS files within a large Backbone.js app, and accounting for image sprites?

【发布时间】：2014-05-16 01:20:38

【问题描述】：

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

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

是否有将大型 CSS 文件 Backbone.js 应用程序拆分为多个 CSS 文件的最佳做法？

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

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

谢谢。

【参考方案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 lint 你的css，会有很大帮助

对于精灵，我目前唯一的想法是SassyJson（对于 Sass），它相对较新。

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

【参考方案2】：

Sass 或 less 都是解决单一巨大 CSS 文件问题的好方法。 （不过，这与 Backbone 并没有真正的关系。它可以应用于任何基于 HTML 的项目。）

首先，您可以立即将单个文件分解为几个较小的文件，然后将它们导入主文件。在我的大多数项目中，我使用grunt 之类的构建工具将 Sass 或更少的源代码编译为单个 .css 文件以包含在 HTML 文件中，因此 CSS 只需要一个 HTTP 请求。

像 Sass/less 这样的 CSS 扩展语言还允许您使用变量来解决 CSS 精灵问题：创建一个包含精灵位置变量的文件，然后仅使用 Sass 规则中的变量。当精灵位置发生变化时，只需更新变量并重新编译。

最后，使用 Sass/less 可以让您从小处着手，然后根据需要逐渐重构更多内容。这样做的好处是可以毫不费力地立即产生有用的好处——比如，只需将大的 CSS 文件分成几个较小的文件——然后随着时间的推移添加更多高级功能，比如重构以使用变量、宏和嵌套的 CSS 规则.

【讨论】：

感谢您的回复，但这并没有真正给我任何新的东西。这并不能回答我关于 sprite-friendly CSS 的问题（因为添加新图像可以更改每个图像的位置）。它也没有提供关于有效地将 CSS 提取到单独文件中的提示（哪些规则属于哪个文件）。