Finally, a Sass project folder structure I actually like.
Nov 3, 2014
I've been working with Sass for quite some time; since about 2009 when it started to make a name for itself in the Rails community. It helps me write stylesheets more modularly, since its
@import adds the code on pre-compile, rather than adding additional HTTP requests in the browser.
However, with the ability to break your code up into many separate files comes incresed complexity in your project structure: how do you keep it all organized? It's a problem that seems simple on the surface, but it's one I've struggled with pretty much since the beginning.
I think I've finally come to a nice, easy solution. In the current landscape of BEM, OOCSS, Atomic CSS, and SMACSS, it all can get a bit overwhelming. Having looked at all of these, I find OOCSS most attractive at it's core principles. The Github project itself is a huge turnoff in terms of complexity though, so I never really gave it a fair shake. It also doesn't seem to lend much in the way of file/folder structure.
Anyway, here's what I've landed on, in a project I'm currently working on. For the first time in quite a while, I'm pretty happy with how this is turning out.
Things start off with a
directory. This is where I set up my document. Far-reaching changes occur here, like setting the document to use
and things of that nature. I also use this folder to store changes to elements on a micro-level. This is akin to an "atom" in Atomic CSS, but I've been using the term "base", since the rest of my CSS will inherit from it.
This directory also inevitably holds some setup files, such as a helpers file for my mixins, or a theme file which initializes some colour variables.
Here is where I create files for basic CSS elements. This is akin to a "block" in BEM. However, some elements may be just a single HTML tag: buttons are a good example of this, but I allow them to get more complex as well.
Layouts are styles for sets of structure only elements. They can have far-reaching consequences, so special HTML is usually written to accomodate for this. I'll generally have a "base" set of styles which the specific layouts inherit from. If the project is very simple, this folder can be substituted for a single "layout" file.
Views are location-based styles. Body classes are applied to facilitate styling elements differently in a particular view. For example, the "locations" page might need a full-width map, but the "events" page might only need a thumbnail. Both will use the same element with the same class name, but I can adjust the styles per-page using a view stylesheet.
That's pretty much the gist of it. Nothing too ground-breaking here, but hey, sometimes the simplest solutions work best :)