27 March 2014

Structuring CSS on the Filesystem


Chris Moore already pointed out that CSS is the last frontier of web development and that we’re mostly using BEM to structure our CSS at Gaslight. Six months has passed and we’re still using BEM so that probably says something.

We’ve now used BEM on multiple projects and we recently had a discussion about organizing our stylesheets. We have been relying on The Silver Searcher in order to find CSS blocks due to our lack of convention. When compared to other assets (models, controllers, etc.) in a project this really didn’t make sense.

Folder Structure

  • application.sass
  • bootstrap_overrides.sass
  • components
    • header.sass
    • post.sass
    • search.sass
  • elements.sass
  • fonts.sass
  • reset.sass
  • utilities.sass
  • variables.sass


In a Rails application this is your manifest file and it is typically included in your application layout. No styles should exist in this file, it should just be @import statements.


We’ve been using [Bootstrap] recently and this is required if you want to customize.


This folder is possibly the most important part. Any component (block) should have its own file in this directory. This makes finding where styles are defined very easy.

Component files are also responsible for media queries that may effect their presentation.


Despite using BEM we still have styles that will apply to all elements and this is the place for them.

These styles represent the baseline or starting point of your application. They’re a level above the reset and the rules should not override other rules or contain nesting for elements that are not inherently nested (ul > li, thead > tr, etc).

  font-size: 4em
  padding: 2px 0

tfoot > tr
  font-weight: bold


Want to know what fonts are available in your project? This is where you look.

  font-family: "Lato"
  src: asset-url('Lato-Regular.ttf', 'font') format('truetype')
  font-weight: normal


These styles are not specific to your application domain and they have a very limited ruleset.

Below are a few examples of good helper classes.

  text-align: left !important
  margin: 0 !important

Below is an example of something that should not be a helper class.

  color: green
  font-weight: bold
  font-size: 200%

We tend to use a lot of the helper classes from inuit.css.


This is where any of your global variables should be defined. Want to define specific colors to reference in other stylesheets, do it here.

$light-green: #1ECA6B
$dark-green: #1AAF5D

$font-base: 1.25rem
$line-height: 1.5rem

Rails Specifics

application.css should only be a manifest and should not include any styles of its own. You should only include manifest files in your views.

Heads up! This article may make reference to the Gaslight team—that's still us! We go by Launch Scout now, this article was just written before we re-introduced ourselves. Find out more here.

Related Posts

Want to learn more about the work we do?

Explore our work

Ready to start your software journey with us?

Contact Us