Structuring CSS on the Filesystem

Introduction

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

application.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.

bootstrap_overrides.sass

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

components

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.

elements.sass

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).

h1
  font-size: 4em
  
hr
  padding: 2px 0

tfoot > tr
  font-weight: bold

fonts.sass

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

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

helpers.sass

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--left
  text-align: left !important
  
.flush
  margin: 0 !important

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

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

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

variables.sass

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.