Rails 中的样式表似乎重叠

Question

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

但是，我的 CSS 来自单独样式表的内容似乎重叠并显示在错误的页面上。例如，我的会话控制器（登录页面）和记录控制器（搜索功能）有一个 main div，宽度不同。但是，当我更新 CSS 对于其中之一，新样式显示在两个页面上。

这是怎么回事，我该如何解决？

Answer 1

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

实际上，我认为通过将 config.generators.stylesheets = false 添加到 application.rb 配置文件并拥有自己的层次结构，可以更轻松地禁用每个控制器的 CSS 文件自动生成CSS 个文件。看看this.

希望对您有所帮助

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

Answer 2

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

在您的布局中：

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

在您的样式表中：

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

Answer 3

这是由于 Sprockets 和错误的 CSS 结构。

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

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

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

解决这个问题的方法是首先确保您不与您调用的 CSS 和相冲突仅 CSS 适合您的应用程序。

链轮

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

Sprockets 编译您的资产，使它们尽可能高效。

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

Rails 执行此操作的“常规”方法是鼓励您使用 controller 中心资产和 application等级资产：

#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 结构正确。这更难实现，但会给你更清晰的结果...

I have a main div with different width for my Sessions controller (login page) and my Records controller (search function.)

#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

Rails 中的样式表似乎重叠

My stylesheets in Rails seem to be overlapping

css

ruby-on-rails

stylesheet

asset-pipeline

以控制器为中心的资产

CSS结构