How I structure my Sass project

We all know projects tend to grow; so having a structure for your CSS is imperative and it is important to start and stay organised. Over time and based on the project structure I started to look for a standard way to organise my SCSS files. And guess what? I found a lot of solutions out there:

The 7–1 pattern from Hugo Giraudel is a widely-adopted structure that serves as a basis for very large projects.

The Skeleton Components from electerious which doesn’t use folders at all, having everything in one folder is very practical: you know exactly where your files are located. Granting using a pretty neat fuzzy search ( Visual Studio Code has one ), you end up picking up and switching files effortlessly.

The Atomic Design methodology from Brad Frost is a clear methodology which promote consistency, scalability and taught me the importance of modularity.

After evaluating them and underlining their commonalities; I considered some principles and best practice for my projects and what follows is what I came up with:

Managing and scaffolding my CSS

I usually divide my project into four basic types of files:

1. abstract
2. base
3. components
4. layout

Even if I sometimes introduce a fifth type for vendors or third-parties (more to it in later); this is a very basic directory structure.

Here’s how the skeleton may looks like:

styles/
|— abstract/ 
|   |— _functions.scss
|   |— _mixins.scss
|   |— _placeholders.scss
|   |— _vars.scss
|   …
|  
|— base/             
|   |— _align.sass
|   |— _background.scss
|   |— _color.scss 
|   |— _typography.scss
|   …
|
|— components/
|   |— _button.scss
|   |— _figure.scss
|   |— _img.scss
|   |— _table.scss
|   …
|
|— layout/
|   |— _body.scss
|   |— _footer.scss
|   |— _header.scss
|   |— _html.scss
|   …
|
— main.scss

Have you noticed that lonely Sass file, main.scss at the root level? It’ s role will be to import and merge all the styles located inside the folders

Now let us look at each of the folders in our architecture:

1 - abstract

This folder enclose files like tools, helpers, variables, functions and mixins. I chose the name Abstract in order to keep this folder alphabeticaly on top; as a matter of fact files inside will be the first imported inside main.scss which makes things consistent. And finally abstract because they don't output any CSS when processed.

|— abstract/ 
|   |— _functions.scss
|   |— _mixins.scss
|   |— _placeholders.scss
|   |— _vars.scss

main.scss

// abstract  —————————————————————————— //

@import 'abstract/functions';
@import 'abstract/placeholders';
@import 'abstract/mixins';
@import 'abstract/vars';

2 - base

The Base folder: consider those files as generic styling across your project. You can use them as boilerplate just like this:

<div class="align-center background-white color-red h3">
	hello world
</div>

|— base/             
|   |— _align.sass
|   |— _background.scss
|   |— _color.scss 
|   |— _typography.scss
|   …

main.scss

// Base  —————————————————————————— //

@import 'base/align';
@import 'base/background';
@import 'base/color';
@import 'base/typography';

3 - components

components the only folder with a plural -s ; simply to emphasise that your project will usually contain heaps of component files. I use a single SCSS file for each individual components with expressive file names such as button for <button>, table for <table> and so on…

|— components/
|   |— _img.scss
|   |— _table.scss
|   |— _button.scss
|   …

main.scss

// Components  —————————————————————————— //

@import 'components/img';
@import 'components/table';
@import 'components/button';

4 - layout

The Layout folder holds the styles for every page of your site. The overall layout of your web page html, body, header and footer will be placed in there.

|— layout/
|   |— _html.scss
|   |— _body.scss
|   |— _footer.scss
|   |— _header.scss
|   …

main.scss

// Layout  —————————————————————————— //
@import 'layout/html';
@import 'layout/body';
@import 'layout/header';
@import 'layout/footer';

5 - vendors

Vendors handles 3rd party CSS, I mostly don’t need this folder or files as I usually import them from the "node_modules". Although sometimes you may find necessary to add vendors manually.

|— vendors/
|   |— _prsim.scss
|   |— _flickity.scss
|   …

imports inside main.scss look like this:

// Third Parties —————————————————————————— //
@import '../../../node_modules/normalize.css/normalize';
@import '../../../node_modules/sass-burger/burger';
@import '../../../node_modules/basicgrid/src/styles/main';
@import 'vendors/prism';
@import 'vendors/flickity';

Finally main.scss

main.scss does two thing: imports all the above files and imports styles from any node package.

main.scss

// Abstracts ——————————————————————————— //
@import 'abstract/functions';
@import 'abstract/placeholders';
@import 'abstract/mixins';
@import 'abstract/vars';

// Third Parties ——————————————————————— //
@import '../../../node_modules/normalize.css/normalize';
@import '../../../node_modules/sass-burger/burger';
@import '../../../node_modules/basicgrid/src/styles/main';
@import 'vendors/prism';
@import 'vendors/flickity';

// Base       —————————————————————————— //
@import 'base/align';
@import 'base/background';
@import 'base/color';
@import 'base/typography';

// Layout     —————————————————————————— //
@import 'layout/html';
@import 'layout/body';
@import 'layout/header'
@import 'layout/footer';

// Components  —————————————————————————— //
@import 'components/img';
@import 'components/table';
@import 'components/button';

And that’s it!

This architecture is expected to differ from project to project but I’m positive you get the idea. Bear in mind, there are no perfect or bad approach in the way you organise your project. The way that helps you swiftly and efficiently isolate and locate your styles; is probably the way to go. Pick something that makes sense and simply consider adopting a strategy for your files which is meaningful to you and especially to you team.