为什么将JavaScript或CSS在rails中滚动与布局拧在一起？

Question

现在，从开发过渡到过渡时，有几次我被JavaScript和样式表汇总到单个文件中时如何更改其行为而感到困惑。

例如，为了保持可维护性，我正在尝试将一系列样式表保持模块化和较小，如下所示：

  <%= stylesheet_link_tag "reset-fonts-grid.css", "typography.css", "layout.css", "cms.css", "cms.about.css", "cms.legal.css", "comments.css", "user_generated_content.css", "overlay.css", "login_page.css", "flag_for_admin.css", 'patch.css', 'nag_guide.css', :cache => "cache/all" %>

当您更关心调试而不是计算http请求时，在开发中就可以正常工作。

但是，一旦我转到生产环境或在config / environments / development.rb中设置缓存，如下所示，布局就会中断：

config.action_controller.perform_caching =否

这是怎么回事，为什么串联文件的行为与一系列较小的请求不同，我该如何解决呢？

顺便说一句，与文件大小相比，页面上的http请求数量实际有多少不同？

Answer 1

您的CSS可以验证吗？ 过去，我遇到了与您类似的问题，这些问题是由我在验证中发现的小错误引起的。

尝试http://jigsaw.w3.org/css-validator/

Answer 2

出于兴趣，如果您更改:cache选项，使其不包含正斜杠，是否可以正常工作？ 例如：

<%= stylesheet_link_tag "reset-fonts-grid.css", ..., :cache => "foo" %>

• Rails为您的组合样式表生成的HTML link元素是什么样的？

Answer 3

如果您想详细了解在串联和非串联情况下如何应用样式，可以安装适用于Firefox的FireBug插件。 然后也许打开两个浏览器窗口，一个在开发页面，一个在生产页面，然后使用FireBug隔离一个给您带来麻烦的DOM元素，并比较两种情况下该元素的计算CSS属性。

Safari的最新版本具有与FireBug非常相似的内置工具。

Rails是否有可能以错误的顺序连接CSS文件？ 似乎不太可能，但是Rails中可能存在错误。 查看串联的文件并检查顺序。 如果它们不正常，则可以创建一个主CSS文件，并使用@include语句包括其他文件。 这样可以确保以正确的顺序阅读它们。