Speeding up Rails + SCSS
tl;dr: By following the Rails + SCSS structure shown here, I saved ~45 minutes/day.
Feast your eyes on your typical Rails application.scss file. The Rails app for the company I work for has ~50 or more .scss files.
I know, I know…it could definitely be cleaned up, we will get to that.
With the above structure, modifying a single CSS selector takes around 30 seconds to process the change and load the webpage. Let’s say I change 100 selectors a day (I think that is being modest). At 30 seconds per initial page render, that’s 3,000 seconds/day or 50 minutes/day! Fuck that.
I need to fix this.
This is how the require method saves me over 45 minutes/day waiting for the initial page load after the modification of a SCSS file. If you’d rather jump straight into the code, please head on over to the GitHub repository. It’s just a simple Rails 5 skeleton demonstrating my SCSS structure with Bootstrap, Font Awesome, and Bourbon.
I group my CSS into three main sections: vendor, partials, and components.
Vendor includes imported files from gems, like Font Awesome, select2, bootstrap-datetimepicker, etc.
Partials are pretty much everything Bootstrap for me. I like to mirror files names when overriding CSS specific to Bootstrap. ie: forms, cards, navbar, etc.
Components are app-specific UI elements. If I have a chat app, I could foresee a components/_conversations or components/_messages file. Others could include _auth.scss, _comments.scss, _user_profile.scss, etc.
The new application.scss has one job: it imports the 3 CSS sections that comprise the application. Nothing more. When this file only imports the 3 main CSS sections, it all of a sudden becomes a lot less daunting. Mine went from 68 total lines to 3.
You might be thinking, what about custom variables…mixins? If you look at the image above that shows the new file structure, you’ll notice a new folder, base, with a file, base/_base. All of the variables and mixins are imported here.
Since I’m no longer importing the files in application.scss, I don’t have access to any variables or mixins unless I explicitly tell each file (that needs variables) to import it. This can definitely become redundant, but I see it as an advantage. I know exactly what variables and mixins each file has access to. Below is an example of the components directory, with two files: the file responsible for requiring all of the components, and an actual component called header.
After making these changes, my initial render has decreased from the 30 seconds mentioned earlier, all the way down to ~3 seconds. From 50 minutes/day to 5!
To see this all together in a Rails application, please head on over to my GitHub repository. It’s a simple skeleton for Rails 5, Bootstrap 4, SCSS, Bourbon, and Font Awesome.
