跨控制器样式表应用程序答案

【问题标题】：Cross Controller stylesheet application跨控制器样式表应用程序
【发布时间】：2017-02-22 01:13:22
【问题描述】：

我有一个设计控制模型“供应商”，它有一个展示页面，展示页面由供应商控制器控制。在展示页面上，有一些表格允许您上传附件或图像。样式表在整个应用程序的标题中应用：

application.html.erb:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag controller_name, media: 'all' if Rails.application.assets.find_asset("#{controller_name}.css") %>

第一行应用应用程序样式表，第二行应用链接到控制器的样式表。

当我在加载附件出错后从供应商控制器呈现显示页面时，处理表单的是设计注册控制器，因此应用的是注册样式表而不是供应商样式表。

我想阻止注册样式表被应用，并确保供应商样式表在呈现时应用于供应商/显示视图。

我认为我的选择是： 1. 从供应商/展会页面中删除表格，并将表格限制在设计注册新页面和更新页面。 2. 在标题中有一个“if”语句，仅将样式表应用于不是注册或供应商的控制器，然后在注册和供应商的视图中使用链接语句到正确的样式表。 3. 使用javascript从供应商页面卸载注册样式表。

你认为最好的选择是什么？或者有没有更好的选择？

【问题讨论】：

标签： css ruby-on-rails controller

【解决方案1】：

我认为最好只有一个样式表。您不会通过拆分它们来节省任何时间或请求。我可能错过了你的观点，但我建议为每个需要有不同主题的领域或观点制定一个“主题”方法。您可以只使用 CSS 类为该区域制定特定规则。

HTML

<!-- body -->

<div class="module">
    <header>
        <h1>type: <span class="type"></span></h1>
    </header>
    <main>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio sequi expedita omnis corrupti distinctio, nemo atque facilis laboriosam natus? Consectetur cupiditate corporis odio tempora at numquam, officiis maiores itaque, aperiam.
    </main>
    <footer>
        <button class="toggle">Toggle the theme for example</button>
    </footer>
</div>

CSS（手写笔/其他）

$color = lightblue
$highlight = lightgreen
$pad = .5rem

body { // shared styles
    padding: $pad
    .module {
        background: white;
        border: 1px solid black
        border-radius: $pad
        overflow: hidden
        max-width: 600px
        header, main, footer {
            padding: $pad*2
        }
        header {
            background: gray    
        }
        footer {
            margin-top: $pad
        }
    }
}

body.registrations {
    background: $color
    .module {
        background: darken($color, 20%)
        header {
            background: darken($color, 40%)
            color: white
            .type {
                &:after {
                    content: 'REGISTRATION'
                }
            }
        }
    }
}

body.suppliers {
    background: $highlight
    .module {
        background: darken($highlight, 20%)
        header {
            background: darken($highlight, 40%)
            color: white
            .type {
                &:after {
                    content: 'SUPPLIERS'
                }
            }
        }
    }
}

这是一个带有粗略切换的 CodePen：http://codepen.io/sheriffderek/pen/zZOONN?editors=1100

【讨论】：