Cross Controller样式表应用程序

Question

I have a devise controlled model "Suppliers" that has a show page, the show page is controlled by the suppliers controller. On the show page, there are forms that allow you to upload attachments or images. The stylesheets are applied throughout the application in the header:

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") %>

The first line applies the application stylesheet and the second applies the stylesheet linked to the controller.

When I render the show page from the suppliers controller after an error with loading the attachment, it is the devise registrations controller that handles the form, so it is the registrations stylesheet which is applied instead of the suppliers stylesheet.

I would like to prevent the registrations stylesheet from being applied and ensure that the suppliers stylesheet is applied for the suppliers/show view when it is rendered.

I figure my options are: 1. Remove forms from the suppliers/show page, and limit forms to the devise registrations new and update pages. 2. Have an 'if' statement in the header that only applies the stylesheet for controllers that are not registrations or supplier and then use a link statement in the views for registrations and supplier to the correct stylesheet. 3. Use javascript to unload the registrations stylesheet from the supplier pages.

What do you think the best option is? Or is there a better option that I haven't thought of?

Answer 1

I think it would be better to just have one stylesheet. You aren't going to save any time or requests by splitting them up. I may be missing your point, but I would suggest having a 'theme' methodology for each area or view that needs to have a different theme. You can just use a CSS class to make specific rules for that area.

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 (stylus / whatever)

$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'
                }
            }
        }
    }
}

Here's a CodePen with a crude toggle: http://codepen.io/sheriffderek/pen/zZOONN?editors=1100