stylesheet_link_tag :all, :cache => true的问题

Rails 2.0引入了css和javascript的合并缓存机制。比方说,使用下面的代码,可以将stylesheets下的所有css文件合并为名为all.css的样式文件,并缓存下来:

<%= stylesheet_link_tag :all, :cache => true %>

合并的好处是,只需一次HTTP请求,就把站点需要的css都下载至客户端了。

但由于css的就近覆盖原则,这种默认的合并会带来问题。假设stylesheets目录下有两个css文件,一个为style.css,另一个为rating.css,合并后rating.css的样式在前,style.css的样式在后(按文件名排列),这样就有可能会发生rating.css中的样式覆盖掉style.css中的样式的情况,而这可能不是设计师设想的效果。

解决这个问题的方法很简单:按设计需要显示指定要合并的css的文件名称,如:

<%= stylesheet_link_tag 'style', 'rating', :cache => 'recipe' %>

合并后的文件名由:cache的参数值决定。上例中合并后的css文件名为recipe.css。

这样做还带来一个额外的好处:stylesheets下实际不使用的css文件不会被合并,减少浪费。