If you're aiming to approach this task in the most efficient way possible, consider assigning a class name to your <html> or <body> tag and enclosing the contents of your CSS files within a selector. In my own setup, I employ a similar technique as outlined below within my ApplicationController.
before_filter :body_class
def body_class
controller_name = self.class.name.gsub(/Controller$/, '')
if !controller_name.index('::').nil?
namespace, controller_name = controller_name.split('::')
end
@body_classes = ["#{controller_name.underscore}_#{action_name} ".downcase.strip]
@body_classes = ["#{namespace.underscore}_#{@default_body_classes.join}".strip] if !namespace.nil?
Incorporating this into my layout involves implementing something along these lines:
<body class="<%= @default_body_classes.join(' ') %>">
Furthermore, consider adjusting the file extensions for all your stylesheets to .css.scss and relocating them to the designated app/assets/stylesheets directory. To streamline their inclusion, add the following directive to the top of a new app/assets/application.css.scss file, ensuring that only this single application.css file is referenced in your layouts.
/*
* =require_tree .
*/
To complete the process, invest some time in enveloping the entirety of each stylesheet with the relevant body class. For instance, if you have a stylesheet dedicated to the User::Admin controller's signup action, encase the entire content within:
.user_admin.signup {
/* Your stylesheet's content here */
}
By adhering to these steps, although not an instant fix, you can make substantial progress efficiently towards achieving the desired outcome in a structured manner.