How to Use Controller Specific Stylesheets in Rails 3.2.1

How do I use Controller specific stylesheets in Rails 3.2.1?

I don't think it works that way (Home.css being applied only to Home controller actions). The different files are just for separation, to make it clearer what are the CSS rules describing. You can read this guide about the asset pipeline. I'm guessing you altered the default application.css.scss and removed the line importing all CSS files from app/assets/stylesheets.

Controller specific stylesheets in rails 3: Inheritence

The Rails guide on how to use the asset pipeline doesn't quite tell the whole truth here. It says:

You should put any JavaScript or CSS unique to a controller inside their respective asset files, as these files can then be loaded just for these controllers with lines such as <%= javascript_include_tag params[:controller] %> or <%= stylesheet_link_tag params[:controller] %>.

Now, you could do as they suggest and load specific stylesheets for each controller, but it does not work as they suggest out of the box. The neglect to mention a few things you must do.

You need to remove the //= require_tree . directive from application.css, which, left in place, will load every other asset in the folder. This means that every page would load users.css, and if you added the controller-specific stylesheet line as in their example, it would load the controller stylesheet twice.
You would need to tell Rails to precompile the individual files. By default, all *.css files besides application.css are ignored by the precompiler. To fix this you'd have to do edit your config to do something like this:
```
# in environments/production.rb
# either render all individual css files:
config.assets.precompile << "*.css"
# or include them individually
config.assets.precompile += %w( users.css static_pages.css )
```

Finally, as instructed by the Rails guide, you'd need to change your stylesheet includes to look something like:

<%# this would now only load application.css, not the whole tree %>
<%= stylesheet_link_tag :application, :media => "all" %>

<%# and this would load the controller specific file %>
<%= stylesheet_link_tag params[:controller] %>

However, the above may not be truly the best practice. Sure, sometimes you might want individual stylesheets, but most the time you probably just want to serve your style bundle so the client can cache one file. This is how the asset pipeline works out of the box, after all.

Besides that, if you were to just add override rules in your controller specific stylesheets, then you're creating a load-order-specific tangle of styles right out of the gate. This... is probably not good.

A better approach might be to namespace the styles in the controller sheets, something like this:

// in application.css (or some other commonly loaded file)
background-color: $color1;

// in users.css.scss
body.controller-users {
  background-color: $color2;
}

// and so on...

Then in your layout, add the controller name to the body class, like:

<body class="controller-<%= params[:controller] %>">

In this way, your styles are resolved by namespace, not just load order. Furthermore with this solution you could still go ahead and load separate controller-specific stylesheets if you desire, or you could forget about that and just let everything be compiled into application.css as it would be by default. All the styles would be loaded for each page, but only the controller-specific styles would apply.

different css for index action in rails 5 bootstrap 4 (single controller)

There are a few ways to accomplish this.

You can create a layout which includes the cover.css asset, and then only apply the layout for the index action as described here Rails layouts per action?

class MyController < ApplicationController
  layout :resolve_layout

  # ...

  private

  def resolve_layout
    case action_name
    when "new", "create"
      "some_layout"
    when "index"
      "other_layout"
    else
      "application"
    end
  end
end

Another option would be to use a single layout and scope your styles.

In views/layouts/application.html.erb Set classes on the body tag like this

<body class="<%= controller_name %> <%= action_name %>">
When rendered it will output
<body class="home index">

Then in your cover.css scope your styles to the .home.index selector

body.home.index h1{
    /* this style is only applied on the home/index page */
}

Best way to add page specific JavaScript in a Rails 3 app?

What I like to do is include the per-view Javascript in a content_for :head block and then yield to that block in your application layout. For example

If it's pretty short then:

<% content_for :head do %>
  <script type="text/javascript">
    $(function() {
      $('user_rating_positve').click(function() {
        $('some_div').show();
      }
    });
  </script>
<% end %>

or, if longer, then:

<% content_for :head do %>
  <script type="text/javascript">
    <%= render :partial => "my_view_javascript"
  </script>
<% end %>

Then, in your layout file

<head>
  ...
  <%= yield :head %>
</head>

how to add styles to actionview helper tags?

Yes you an do it in following way

<%= link_to "Home", {:controller=> "home", :action=> "index"}, :style=>"position:absolute;top:0px" %>

This will create following HTML

<a href="/home" style="position: absolute; top: 0px;">Home</a>

It depends on which tag you are using for some tag you have to add :html>{}

For link_to_remote you have to write

<%= link_to_remote "Next", 
                :update=>"uxUpdateDiv", 
                :url=>{:controller=> "home", :action=> "next"}, 
                :html=>{:style=>"float:right;"},
                :before=> "jQuery('#uxcLoader').css('display','block'); jQuery('#uxOverLay').css('display','block');",
                :success=> "jQuery('#uxcLoader').css('display','none'); jQuery('#uxOverLay').css('display','none');" %>

this will create following html check it out.

<a href="#" onclick="jQuery('#uxcLoader').css('display','block'); jQuery('#uxOverLay').css('display','block');; new Ajax.Updater('uxUpdateDiv', '/home/next', {asynchronous:true, evalScripts:true, onSuccess:function(request){jQuery('#uxcLoader').css('display','none'); jQuery('#uxOverLay').css('display','none');}}); return false;" style="float: right;">Next</a>

Rails 3.1 asset pipeline with suburis

Figured it out myself. In application.rb, I added...

config.assets.prefix = "/my-suburi"

and then restarted the server. That changed the path in the header to be "/my-suburi/screen.css" (notice the lack of 'assets'), but I confirmed that it is correctly pulling from the /app/assets/stylesheets folder, now.