27 March 2014
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.
