Cross Controller样式表应用程序

Question

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

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从供应商页面卸载注册样式表。

你认为最好的选择是什么？ 还是有一个我没有想过的更好的选择？

Answer 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