【问题标题】：My stylesheets in Rails seem to be overlapping我在 Rails 中的样式表似乎重叠
【发布时间】：2016-01-16 07:52:05
【问题描述】：

我在 Rails 中有四个控制器（Pages、Sessions、Records、Users），每个控制器都有一个单独的样式表，默认命名为 pages.css.scss、sessions.css.scss 等。我所有的全局样式都进入application.css。

但是，我来自不同样式表的 CSS 似乎重叠并显示在错误的页面上。例如，我的 Sessions 控制器（登录页面）和 Records 控制器（搜索功能）有一个宽度不同的 main div。但是，当我为其中一个更新 CSS 时，新样式显示在两个页面上。

发生了什么，我该如何解决？

【问题讨论】：

拥有与控制器直接对应的样式表听起来像是违背了 CSS 旨在解决的问题 - 整个“级联”问题。
我以为这是 Rails 的默认设置？每次创建控制器时，Rails 都会在 app/assets/stylesheets 中创建相应的 CSS 文件。
我有一段时间没有使用 Rails，所以老实说我不能对此发表评论——但它肯定不会在“当时”做，只要我正确理解你。

标签： css ruby-on-rails asset-pipeline stylesheet

【解决方案1】：

这是由于 Sprockets 和糟糕的 CSS 结构造成的。

#app/assets/stylesheets/application.css
*= require_all

问题不是 CSS，而是 您调用它的方式 - 无论是在您的资产管道还是您的应用程序中。

以上内容会将您的所有 css 连接到主 application.css 文件中。虽然这看起来无害，但如果您有冲突的 CSS 定义，它们会覆盖自己。

解决这个问题的方法是首先确保您的 CSS 没有冲突并且您正在调用仅适合您的应用程序的 CSS。

链轮

为了更好地理解修复，您需要了解sprockets。

Sprockets编译您的资产以使其尽可能高效。

您的资产驻留在资产管道中，该管道已被创建为可以为您应用的不同部分加载适当的 CSS - 既高效又通用。

Rails 执行此操作的“常规”方式是鼓励您使用以控制器为中心的资产和应用程序级别的资产：

#app/assets/stylesheets/controller.css
#app/assets/stylesheets/application.css

如果您的 CSS 在原地工作，这没关系，但如果不能，您就有问题（就像您遇到的情况一样）。

因此，解决方法是首先确保您根据需要拆分 CSS，并且正确编码 CSS（稍后再说）。

以控制器为中心的资产

1.删除“application.css”中的所有引用

Sprockets 使您能够将其他文件“包含”到您的主 application.css 文件中：

#app/assets/stylesheets/application.css
*= require_all <- remove this line

这将防止您的“application.css”文件将所有其他文件编译到其中。其他的会自己编译，让你call them separately：

2。布局

#app/layouts/application.html.erb
<%= stylesheet_link_tag "application", controller_name %>

这将允许您使用基础级应用程序 CSS 调用以控制器为中心的资产。

这样做的缺点是您必须重复大量 CSS，并且最终会为您的应用的不同部分使用完全不同的 CSS - 不是最好的。

CSS 结构

另一种方法是使您的 CSS 结构合理。这要实现起来要困难得多，但会给您带来更清晰的结果...

我的 Sessions 控制器（登录页面）和我的 Records 控制器（搜索功能）有一个宽度不同的 main div。

#app/assets/stylesheets/application.sass
.main
  /* main styling */
  &.search 
     /* search styling here */
  &.results
     /* results styling here */

这将允许您调用：

#app/views/layouts/application.haml
.main.search search stuff here
.main.results results stuff here

【讨论】：

这是一个很棒且非常有用的答案！我将改进我的 CSS 结构并让我的所有 CSS 组织得更好。快速说明： require_all 实际上是 require_tree 。我还发现this SCSS refresher Railcast 非常有用，特别是开始 8 分钟标记。
感谢您的详细回答！是否可以为每个页面/动作而不是每个控制器维护 CSS？

【解决方案2】：

通常，我所做的是将与控制器和操作匹配的类放在 body 标记上。然后，在您的样式表中，您可以包装控制器特定的样式，这样它们就不会渗入您的应用程序的其他区域。这是我所说的一个例子。

在您的布局中：

<body class="<%= params[:controller].parameterize %> <%= params[:action] %>">

在您的样式表中：

body.sessions.new {
  .main {
    width: 200px;
  }
}

【讨论】：

【解决方案3】：

为控制器创建 CSS 文件背后的想法是创建彼此之间完全独立的功能，而不仅仅是独立于 ruby 代码。如果您想坚持使用它，您可以为每个仅包含相应 CSS 文件的控制器设置不同的布局，rails 会自动尝试使用名为控制器的布局，如果找不到，它将回退到 application.html.erb。

在实践中，我认为通过将config.generators.stylesheets = false 添加到您的application.rb 配置文件并拥有自己的CSS 文件层次结构，更容易禁用每个控制器的CSS 文件自动生成。看看this。

希望有帮助

编辑如果您打算坚持使用单独的 css 文件，另一个合乎逻辑的解决方案是在视图上具有不同的类属性，例如用户的所有视图都有一个 <div class="userPage"></div> 包装内容并将其用于 css 文件以防止重叠。

【讨论】：