Organizing stylesheets in Ruby on Rails projects

We are influencers and brand affiliates.  This post contains affiliate links, most which go to Amazon and are Geo-Affiliate links to nearest Amazon store.

Ruby on Rails’ asset pipeline is an efficient, yet a bit confusing feature. Basically, Rails scaffold generates a stylesheet per controller so that your models organize according to your application’s domain model (which is quite inconvenient for building a modular codebase and reusable components). What truly needed is a custom CSS architecture that allows easily creating, modifying and reusing elements. Railsware’s Ruby on Rails developer created these helpful tips.

The asset has following functionality: precompiles, concatenates, minifies assets and places them in the public/assets folder. Two pivotal technologies empower the asset – Sprockets and Tilt (the template engine that Sprockets use to maintain file types like sass, erb, coffee, etc. in the asset pipeline)

A manifest file is the keystone of the asset pipeline; it uses directives to affirm certain files to be included and an order of inclusion. He number of manifest files is unlimited– one per layout or one per page, it is all about your personal choice.

Such CSS preprocessors like LESS, SASS or Sylus are easily used with the help of asset pipelines. It is more appropriate to work with SASS because it comes with Rails as a part of starting pack. CSS preprocessors grant your usage of functions, variables, mixins and other useful stuff that might be bestowed in any modules and files. However, in order to use them, SASS source code should be first combined and then compiled to CSS.

There may appear an issue with using Sprockets //=require syntax to specify which files should be incorporated. Sprockets compiles your Sass source code first as independent stylesheets and then merges the resulting CSS into a single file. That is why you need to import your mixins.sass at the top of each file, or else you will see an exception if you try to use any mixin. You set the Sass compiler to combine the Sass source code first by using the @import syntax, and then perform the compilation.

In most Rails projects, there are several layouts that have different styles, but there is still common codebase that should be shared. Therefore, here are some guidelines on how to organize you assets files and directories, so that they were easily extendable and had a flexible and well-defined structure.

At the base folder, you find styles that might never be changed – i.e. reset, grids, spaces, and helpers; likewise, they are added to every manifest.

 Manifests files per layout

If concrete layouts have different styles, you should create one manifest file per layout. Manifest here is not just sprockets manifest, but .sass file with all @imports of necessary files.


Folder for each manifest
you need to create a separate folder for each manifest file with the same name. application folder forapplication.sass file as a default layout. All important features like layout styles, typography, all objects and modules that are used in this particular layout are contained in this folder.


You can insert responsive styles under responsive folder, divide your interface into objects and modules and put them inside the proper folder.


We are influencers and brand affiliates.  This post contains affiliate links, most which go to Amazon and are Geo-Affiliate links to nearest Amazon store.