Last Updated: April 12, 2022
·
1.9K
· pbruna

CSS Namespace for Rails and Assets Pipeline

Im copying this from the Rails on Fire blog.

To minimize the requests needed for loading our site we create a single application.css through the asset pipeline. The inherent problem with this setup is that css definitions for different subpages can potentially clash. To make sure this doesn't happen we give the body tag a special id composed of the controller and action name of the current site.

<body id="<%= "%s_%s" % [controller_name, action_name] %>">
</body>

Then we start every css file that only contains scss for a specific page with the id of that page and name the file controllername_actionname.scss:

#home_index{
  .whatever{
    margin-top:50px;
  }
}